简介ws模块是WebSocket协议在Node端的一个实现，它允许客户端（通常是浏览器）与服务器保持连接。这种持续连接的特性使得WebSocket特别适用于游戏或者聊天室等使用场景。与其他基于WebSocket协议的模块相比，ws模块非常纯粹。只关注基于WebSocket协议的实现。Socket.io等其他工具提供了后备方法。当WebSocket不可用时，它会使用轮询来模拟持久连接。WebSocket协议被设计得非常简单和有效。还不了解的朋友可以先了解一下。这里有几篇介绍WebSocket协议的文章。https://developer.mozilla.org...http://www.ruanyifeng.com/blo...https://www.cnblogs.com/fuqia...本文主要分为以下几个部分：ws模块介绍ws搭建服务器ws制作客户端ws协作Vue制作一个简单的在线聊天室。本文使用的ws版本为6.1.0.ws模块介绍ws模块基本分为两部分，具有以下特点：server部分使用ws模块，可以配置为基于当前的一些Http/s服务器基于内部的Http模块建立连接。服务器是手动控制的。客户端部分的升级几乎和浏览器一样。API的客户端实现引入了ws模块：constWebSocket=require('ws');创建服务器：constwss=newWebSocket.Server({port:8080});创建客户端：constws=newWebSocket('ws://127.0.0.1:8080');ws服务器的建立ws服务器的建立可以基于Http服务器，也可以使用内部的Http服务器。为了简单介绍下面的例子，使用内部服务器。ws模块的server的创建和使用和Node的Http模块非常相似：constWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});//监听端口wss.on('connection',functionconnection(ws){//当server和client握手成功后触发该事件，第一个参数为客户端对象ws.on('message',functionincoming(message){console.log('客户端发送的数据',message);});ws。发送（'某事'）;//响应内容});这里需要指出的是，WebSocket是通过Http协议升级后的WebSocket协议。在connection事件中，第一个参数是一个Client对象，其实就是ws模块的客户端实例。ws模块使用这个对象来描述一个连接对象。第二个参数是一个http.IncomingMessage对象，可以用来获取Cookie等请求参数。这里只需要记住connection事件的第一个参数是一个ws实例对象，后面会介绍。服务器端有很多事件、属性和方法。这里我只写一些常用的参数。我会在文末附上详细的官方文档。Event:close服务端关闭时触发连接，客户端与服务端握手完成后触发error，底层服务端发生错误时触发headers，客户端请求升级协议。此时WebSocket通信还没有建立。监听启动时可以在这个事件Trigger属性中查看并修改Headerlistening服务器：server.clients一个Set对象保存了服务器所有已建立的连接对象，只有在Server的构造函数中clientTracking为True时才有效。方法：close()调用后关闭内部Http服务器，一旦数据传输完成，所有客户端连接将自动关闭。客户建立上面已经提到了。ws模块提供的客户端API和浏览器的几乎一样。确实如此，但它提供的功能比浏览器多。.使用客户端的例子（这个例子来自官网）：constWebSocket=require('ws');constws=newWebSocket('wss://echo.websocket.org/',{origin:'https://websocket.org'});ws.on('open',functionopen(){//握手成功后触发console.log('已连接');ws.send(Date.now());});ws.on('close',functionclose(){console.log('disconnected');});ws.on('message',functionincoming(data){//触发console.log(`往返时间：${Date.now()-data}ms`);setTimeout(functiontimeout(){ws.send(Date.now());},500);});echo.websocket.org这个网站提供了一个简单的webSocket服务器，你可以直接在Node中运行上面的例子。同样客户端也提供了丰富的事件属性和方法，这里简单介绍一些最常用的内容：连接关闭时触发事件关闭。error在底层错误发生时触发，例如服务器无响应导致的超时。message当服务器发送的数据到达时触发open当服务器建立连接时，会触发方法addEventListenerremoveEventListenersend向服务器发送数据。close关闭连接（当前数据接收或发送时）terminate直接关闭连接属性readyState当前连接状态一共有四个值0connected1open3Closing4Closing（和上的状态码完全一样浏览器端）实例服务器和客户端交互constWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});wss.on('connection',functionconnection(ws){ws.on('message',functionincoming(message){console.log('服务端收到客户端发送的内容：',message);});//服务端发送的数据ws.send('这是服务器发送的数据');});constws=newWebSocket('ws://127.0.0.1:8080');ws.on('open',functionopen(){//客户端发送的数据ws.send('我是客户端');});ws.on('message',functionincoming(data){//接收到服务端发送的数据console.log('客户端接收到服务端的内容',data);});输出：客户端接收到服务器的内容这是服务器发送的数据服务器接收到客户端发送的内容：我是客户端广播消息广播消息的基本原理是获取服务器传入的客户端对象连接事件，然后收集所有客户端对象，然后迭代调用发送方法。官方示例：constWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});//在服务器对象上挂载广播方法并向所有人广播wss.broadcast=functionbroadcast(data){//从服务器获取所有连接并迭代wss.clients.forEach(functioneach(client){//如果连接打开if(client.readyState===WebSocket.OPEN){//发送消息client.send(data);}});};wss.on('connection',functionconnection(ws){ws.on('message',functionincoming(data){//遍历服务器端对象中的所有客户端wss.clients.forEach(functioneach(client){//如果连接状态为打开且不是当前客户端对象if(client!==ws&&client.readyState===WebSocket.OPEN){//发送消息client.send(data);}});});});浏览器与服务器交互服务器：constWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});wss.on('connection',functionconnection(ws){ws.on('message',functionincoming(message){console.log('服务端收到客户端发送的内容：',message);});//服务器发送的数据ws.send('这是服务器发送的数据');});Browser:constclient=newWebSocket('ws://127.0.0.1:8080');client.addEventListener('open',()=>{//客户端发送的数据client.send('我是client');});client.addEventListener('message',(data)=>{//接收到服务端发送的数据console.log('客户端接收到服务端的内容',data);});浏览器客户端和ws客户端的异同。浏览器ws客户端使用on方法添加事件。无法使用addEventListener。可以使用onerror,onclose...message事件,evnt.data获取数据是否readyState属性是使用vue+ws做在线聊天室代码已经放在github上：https://github。com/uioz/Simpl...注意：没有使用构建工具。注：本项目服务端部分使用TS编写，客户端未使用TS。npm指南的参考包括：二进制数据传输和压缩。外部Http/s服务器升级为WebSocket的具体用法。一个Http对应多个WebSocketServer心跳超时检测。客户端ip获取https://www.npmjs.com/package/wsAPI手册：https://github.com/websockets...
