利用webSocket实现浏览器中多个标签页之间的通信

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

webSoket用来实现 双向通信 ，客户端和服务端 实时通信。

webSoket优点和缺点？

优点：对于前端来说，使用简单，功能灵活，如果部署了webSocket服务器，可以实现实时通信。

缺点：需要服务端技术的支持，如果websocket数据量比较大的话，会严重消耗服务器的资源。

例子：

01 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);
                  }
            }
       })

 }
})

02 用来发送信息的标签页

<!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>

03 接收消息的标签页

<!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>