最近接到一个聊天室的任务，之前在学校完全没有接触过这方面的需求，在网上查找资料后，基本确定了实现方案，现在就开始着手学习，在此记录一下遇到的问题。
初识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-websocket
2、创建一个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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 400px;
border: 1px solid;
}
</style>
</head>
<body>
<!-- 显示内容 -->
<div></div>
<!-- 输入内容 -->
<input type="text" placeholder="请输入要发送的内容" />
<!-- 发送按钮 -->
<button>发送</button>
<script>
var input = document.querySelector("input");
var button = document.querySelector("button");
var div = document.querySelector("div");
// 1、创建websocket
// 参数：websocket的服务地址
var socket = new WebSocket("ws://localhost:3000");
// 2、open：当和websocket的服务器连接成功时触发
socket.addEventListener("open", () => {
div.innerHTML = "服务器连接成功了！";
});
// 3、 send：发送数据给服务器
button.addEventListener("click", () => {
var value = input.value;
socket.send(value);
console.log(value);
});
// 4、message：接收服务器数据
socket.addEventListener("message", (e) => {
div.innerHTML = JSON.parse(e.data);
});
</script>
</body>
</html>
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即可
这篇只是完成了一个最简单的聊天室功能，聊天历史记录、区分消息类型、定位到最新一条消息、发送图片表情等都没有实现，接下来就是按着微信聊天对功能进行优化。
