webSocket实现通信原理及聊天案例

webSocket是什么？

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

通俗来讲就是不需要浏览器主动去向服务器请求数据，只需要做一个握手的动作（确保连接），就可把数据从服务器推送到客户端即浏览器。

webSocket怎么用？

webSocket事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

WebSocket 方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

首先，客户端需要和服务端建立起一个连接
服务端：

const WebSocket = require('ws');// 导入WebSocket模块:
const WebSocketServer = WebSocket.Server;// 引用Server类:
const wss = new WebSocketServer({ port: 3000 });// 实例化: 端口3000

客户端：

var sock=new WebSocket('ws://localhost:3000');

客户端向服务端发送数据

sock.send(
    JSON.stringify({
        ***
    })
)

服务器接收数据并把收到的数据进行转发给其他连接该服务器的客户端

wss.on('connection', function(ws) {
    // 接收客户端数据
    ws.on('message', (message)=> {
      //message即为收到的数据
      message = JSON.parse(message)
      wss.clients.forEach((client)=>{
        // 不接收自己发的信息
        if(client != ws){
           //服务端向客户端发送
          client.send(JSON.stringify({
             ***
          }))
        }
      })
    });
    // 关闭 断开的客户端
    ws.on('close',function () {
      console.log('已断开');
    })
});

客户端接收到数据并进行处理

  sock.onmessage=(message)=>{
       //message.data即为收到的数据
       var msg=JSON.parse(message.data);
   }

实现效果图：


话不多说，上代码
https://github.com/myweiwei/websocket

将不断更新完善，欢迎批评指正！