WebSocket 技术是一种 Web 开发中常用的实时通信协议，其作用是建立一个持久性的连接，使客户端和服务器之间可以实时进行双向通讯。
WebSocket 的优势
传统的 HTTP 协议采用了客户端-服务器模式，客户端通过发起请求，服务器响应。在一个请求被处理完成后，连接就会被关闭，不支持长连接。而 WebSocket 可以使得连接保持不间断，从而允许服务器主动向客户端推送数据。另外，WebSocket 还有以下优点：
- 低延迟：通过 WebSocket 建立起来的连接是双向的，通讯所需时间减少了 50%。
- 较少的资源占用：采用 WebSocket 协议的聊天室和在线游戏的服务器，与以数据包方式传输的服务器相比，服务器资源的占用量会少得多。
- 支持自定义协议：可以按照自己的要求定义通讯协议，实现更加个性化的功能。
环境配置
在开始学习 WebSocket 技术之前，我们需要安装一个支持 WebSocket 的 Web 服务器，这里我推荐使用 Node.js 并结合 express 搭建。
安装 Node.js 在 Node.js 官网 上下载并安装 Node.js。
初始化项目 打开命令行，进入项目文件夹，运行如下命令：
npm init -y
它将会初始化一个名为
package.json的文件，用于存储项目详情和依赖。安装依赖 运行如下命令安装 express：
npm install express
创建服务器 在项目文件夹下，新建一个
index.js文件，然后编写以下代码：-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ------------- ---- - --------------- -------- -- ----- ------ - ---------------- ---------- - ------------------- --------- -- ---- --------- --
运行该文件，即可启动服务器：
node index.js
在浏览器中访问 http://localhost:3000，即可看到页面显示
Hello World!。
编写 WebSocket 聊天室
创建 WebSocket 服务器
WebSocket 服务器需要处理客户端发来的连接请求，并为请求创建一个 WebSocket 对象。
首先，我们需要安装 ws 模块：
npm install ws
在项目文件夹下，新建一个 chat_server.js 文件，然后编写以下代码：
-- -------------------- ---- ------- ----- --------- - ------------- ----- --- - --- ------------------ ----- ---- -- -------------------- -------- -------------- - ------------------- ----------- -- --------- --
在上述代码中，我们创建了一个名为 wss 的 WebSocket 服务器，且监听了一个为 8080 的端口。在每次连接事件发生时，可以处理连接的事件，比如广播、清除空闲连接等。
接下来，我们需要为服务器添加广播功能：
-- -------------------- ---- -------
----- --------- - -------------
----- --- - --- ------------------ ----- ---- --
-------------------- -------- -------------- -
------------------- -----------
---------------- -------- -------------- -
--------------------- -------- ---------
---------------------------- ------------ -
-- ------------------ --- --------------- -
-----------------
-
--
--
--在上述代码中，我们添加了广播功能，实现了从服务器向所有客户端发送消息。
创建 WebSocket 客户端
WebSocket 客户端就是使用 WebSocket 协议的浏览器。我们在前端使用 JavaScript 的 WebSocket 对象来创建 WebSocket 客户端对象。
-- -------------------- ---- ------- ----- -- - --- -------------------------------- --------- - ---------- - ---------------------- -- -------- - ------------ - --------------- - --------------------- -------- --------------- -
在上述代码中，我们使用 WebSocket 类创建一个 WebSocket 客户端对象，参数是 WebSocket 服务器的地址。我们还绑定了一个 onopen 事件和一个 onmessage 事件，分别表示连接成功和收到来自服务器的消息。此时，当我们在服务器端向客户端发送消息时，前端页面会输出这个消息。
总结
本篇文章主要介绍了 WebSocket 技术和搭建 WebSocket 聊天室的过程。WebSocket 技术在实时通讯、在线游戏和推送系统等领域有着广泛的应用，如果你想了解更多，可以参考相关资料进行深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d18776b5eee0b5258c485b