目录

• 1、缺点
• 2、优点
• 3、步骤
• 4、服务器端server.js文件代码
• 5、客户端send.html文件代码
• 6、客户端reception.html文件代码
• 7、完整代码

1、缺点

1、需要服务端的支持才能完成任务。如果socket数据量比较大，会严重消耗服务起得资源。
2、必须要在服务端项目中写服务端监听程序才能使用。

2、优点

使用简单，功能灵活且强大，如果部署了webSocket服务器，可以实现很多实时通信功能。

3、步骤

第一步，新建一个文件夹webSocket。
第二步，初始化webSocket文件夹，使用npm init下载package.json文件。
第三步，使用npm install --save ws安装模块。
第四步，在webSocket文件夹里面创建三个文件，三个文件跟package.json文件同级，分别是：server.js/send.html/reception.html。

4、服务器端server.js文件代码

// 获得WebSocketServer类型let WebSocketServer = require('ws').Server;// 创建WebSocketServer对象实例，监听指定端口let wss = new WebSocketServer({ port: 3600 });// 创建保存所有已连接到服务器的客户端对象的数组let 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 (let key of clients) {  if (key != client) {      key.send(msg);  }     } });    }}); // 启动服务器的命令node server.js

5、客户端send.html文件代码

<input type="text" id="msg"><button id="send">发送</button>

// 建立到服务端websocket连接let ws = new WebSocket("ws://localhost:3600");send.onclick = function() {if (msg.value.trim() !== "");ws.send(msg.value.trim());};

6、客户端reception.html文件代码

<div><span>收到消息:</span><span id="recMsg"></span></div>

// 建立到服务端websocket连接let ws = new WebSocket("ws://localhost:3600");// 当连接被打开时，// 注册接收消息的处理函数ws.onopen = function(event) {// 当有消息发过来时，// 就将消息放到显示元素上ws.onmessage = function(event) {recMsg.innerHTML = event.data;};};

7、完整代码

gitee(码云) - mj01分支 - webSocket 文件夹

风车动漫