websocket实现聊天室（一）
最近接到一个聊天室的任务，之前在学校完全没有接触过这方面的需求，在网上查找资料后，基本确定了实现方案，现在就开始着手学习，在此记录一下遇到的问题。
初识websocket
在简单了解websocket后，我觉得与http请求类似，不过websocket可以实现在客服端向服务器发一次请求之后，就会建立一个不会中断的通讯，这样实现聊天室就不需要像http请求那样，你需要隔一段时间就向服务器发一次请求，询问是否有发给我的消息。
H5中使用websocket
H5中提供了websocket的API，我们可以直接使用。
主要就是四部曲:
1、创建websocket（这里有一个问题，我参考资料中websocket服务地址使用的是ws://echo.websocket.org，但我使用的时候报了个错，貌似是被拦截器拦截了，没有找到解决办法，所以直接使用的自己本地创建的websocket的服务地址，本篇后面也会介绍如何创建一个简单的本地的websocket服务）
// 1、创建websocket
// 参数：websocket的服务地址
var socket = new WebSocket("ws://localhost:3000");2、注册一个open事件，在连接创建时触发的事件
// 2、open：当和websocket的服务器连接成功时触发
socket.addEventListener("open", () => {
// 将服务器连接成功的信息打印到div中
div.innerHTML = "服务器连接成功了！";
});3、注册一个send事件，发送数据给服务器
// 3、 send：发送数据给服务器
button.addEventListener("click", () => {
// 获取输入框中的数据
var value = input.value;
// 调用send方法将数据发送给服务器
socket.send(value);
});4、注册一个message事件，接收服务器数据
// 4、message：接收服务器数据
socket.addEventListener("message", (e) => {
// 将接收到的数据显示出来
div.innerHTML = e.data;
});这样客户端（浏览器）简单的流程就走完了，接下来就是搭建一个本地的websocket服务。
搭建一个本地的websocket服务
这里我是用的方式是用nodejs-websocket进行搭建，使用说明文档地址： ddwsnodejs-websocket - npm
按照官方的教程进行搭建就可以。
1、首先我们需要安装nodejs-websocket的依赖
npm install nodejs-websocket2、创建一个server.js,引入nodejs-websocket包
// 1、 导入nodejs-websocket包
const ws = require("nodejs-WebSocket");3、创建一个server
// 创建一个server
const server = ws.createServer((conn) => {
console.log("有用户连接上来了！");
// 接收到客户端发送的数据时触发
conn.on("text", (data) => {
broadcast(data);
});
// 连接断开时触发
conn.on("close", (data) => {
broadcast(data);
});
// 异常时触发
conn.on("error", (data) => {
console.log("发生异常！");
});
}).listen(PORT, () => {
console.log("websocket服务器动起来了！监听了端口：" + PORT);
});这里有一个需要注意的地方，注册close事件时，也需要将error事件注册，因为发生close事件时，会发生异常，若没有注册error事件，服务器就会停止运行。
4、将接收到的数据发送给所有人（广播）
// 广播方法
function broadcast(msg) {
server.connections.forEach((item) => {
item.send(JSON.stringify(msg));
});
}这样一个简单的websocket服务器就搭建完成了。
下面把两个完整的代码贴出来
index.html
Document
server.js
// 1、 导入nodejs-websocket包
const ws = require("nodejs-WebSocket");
const PORT = 3000;
let count = 0;
// 创建一个server
const server = ws
.createServer((conn) => {
console.log("有用户连接上来了！");
count++;
conn.userName = "用户" + count;
broadcast(conn.userName + "进入了聊天室");
// 接收到客户端发送的数据时触发
conn.on("text", (data) => {
broadcast(data);
});
// 连接断开时触发
conn.on("close", (data) => {
count--;
broadcast(data);
});
// 异常时触发
conn.on("error", (data) => {
console.log("发生异常！");
});
})
.listen(PORT, () => {
console.log("websocket服务器动起来了！监听了端口：" + PORT);
});
// 广播方法
function broadcast(msg) {
server.connections.forEach((item) => {
item.send(JSON.stringify(msg));
});
}运行
命令提示符进入到server.js的目录下，node .\server.js，然后打开index.html即可