webSocket实现浏览器内多个标签页（.html页面）之间的通信

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">发送 if (msg.value.trim() !== ""); ws.send(msg.value.trim()); }; 

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

<div> <span>收到消息: // 当有消息发过来时， // 就将消息放到显示元素上 ws.onmessage = function(event) { recMsg.innerHTML = event.data; }; }; 

7、完整代码

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