利用webSocket实现浏览器中多个标签页之间的通信
webSoket用来实现双向通信，客户端和服务端实时通信。
webSoket优点和缺点：
优点：对于前端来说，使用简单，功能灵活，如果部署了webSocket服务器，可以实现实时通信。
缺点：需要服务端技术的支持，如果websocket数据量比较大的话，会严重消耗服务器的资源。
例子：
1 websocket服务器端搭建
//初始化一个node项目：node init，一路确认就可以,文件夹会自动创建一个package.json文件 // 下载ws文件 npm i -save ws //获得WebSocketServerr类型 var WebSocketServer = require('ws').Server; //创建WebSocketServer对象实例，监听指定端口 var wss = new WebSocketServer({ port:8080 }); //创建保存所有已连接到服务器的客户端对象的数组 var clients=[]; //为服务器添加connection事件监听，当有客户端连接到服务端时，立刻将客户端对象保存进数组中 wss.on('connection', function (client) { console.log("一个客户端连接到服务器") if(clients.indexOf(client)===-1){//如果是首次连接 clients.push(client) //就将当前连接保存到数组备用 console.log("有"+clients.length+"客户端在线") //为每个client对象绑定message事件，当某个客户端发来消息时，自动触发 client.on('message',function(msg){ console.log('收到消息'+msg) //遍历clients数组中每个其他客户端对象，并发送消息给其他客户端 for(var c of clients){ if(c!=client){//把消息发给别人 c.send(msg); } } }) } })
2 用来发送信息的标签页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 这个页面是用来发送信息的 --> <input type="text" id="msg"> <button id="send">发送</button> <script> //建立到服务端webSoket连接 var ws=new WebSocket("ws://localhost:8080") send.onclick=function(){ if(msg.value.trim()!=''){//如果msg输入框内容不是空的 ws.send(msg.value.trim()) //将msg输入框中的内容发送给服务器 } } </script> </body> </html>
3 接收消息的标签页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 这个标签页是用来接收信息的 --> <h1 >收到的消息:<p id="recMsg"></p></h1> <script> //建立到服务端webSoket连接 var ws=new WebSocket("ws://localhost:8080") //当连接被打开时，注册接收消息的处理函数 ws.onopen=function(event) { //当有消息发过来时，就将消息放到显示元素上 ws.onmessage=function(event) { recMsg.innerHTML=event.data; } } </script> </body> </html>
转自：https://blog.csdn.net/aweo960421621/article/details/101973580
