核心技术是:socket.io 这个中间件

主要是流程是:网页引入socket.io的JS文件,通过跟NodeJS服务器来建立Socket双工通信。

我们WEB使用的是,http协议,这是单工通信,理解成:只能网页找服务器要数据,服务器不能主动给客户端下发数据。

Socket通信实现了双工通信,理解成:客户端能找到服务器,服务器也能找到客户端

理解Socket通信,基本三个步骤:建立链接,通信(接受,推送),断开链接。

 io.on('connection', function(socket){  // 建立链接 
      console.log('a user connected');  
      socket.on('disconnect', function() {    // 断开链接
              console.log('user disconnected');  
      });
      socket.on('chat message', function(msg){   // 接受消息
         io.emit('chat message', '[server]'+msg);  // 推送消息
     });
});

上面就是服务端的核心的四步。

客户端的代码就更简单了

 var socket = io();  // 实例化Sockect对象
 socket.on('chat message ', function (data) {   // 接受消息
    console.log(data);    
    socket.emit('chat message', { my: 'data' }); // 推送消息
 }); 

游览器查重

Chorme浏览器 F12域名模式下查询请求链接

这个跟之前的网络请求不一样,不是XHR。是SW(webSocket)

如果报错:

from origin ‘null’ has been blocked by CORS policy: The value of the ‘Access

说明你的服务器配置错误,Socket.io的策略,如果你的服务器不支持webSocket就会走AJAX的轮询模式

如果你的服务器出现

AJAX轮询的日志

这样的轮询代码,那就无误。解决办法就是:重新开一个端口,不要跟web服务器端口同名了

Leave a Reply

Your email address will not be published. Required fields are marked *