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">发送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 文件夹