实现多个页面之间通信的常用方式

  1. websocket协议
  2. localstorage
  3. html5浏览器的新特性

1、websocket

 全双工(full-duplex)通信自然可以实现多个标签页之间的通信,
相信网上通过websocket实现聊天室的教程也不少(用来实现双向通信,客户端和服务端实时通信)
//初始化一个node项目:node init,一路确认就可以,文件夹会自动创建一个package.json文件

监听
//获得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);
                  }
            }
       })
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值