随着互联网的发展，即时通讯变得越来越重要，特别是在社交、电商和游戏等领域。而传统的 HTTP 协议无法满足实时性的需求，所以 WebSocket 作为一种新的通信协议被广泛使用。那么，在前端类中，我们如何使用 Node.js 和 WebSocket 实现即时通讯呢？
1. WebSocket 的概念
WebSocket 是一种双向通信协议，它基于 TCP 协议实现，提供了真正的即时通信。它不像 HTTP 协议有大量的请求头信息，只需要在初次连接时进行握手，之后建立长连接并通过数据帧进行数据传输。由于其轻量级和高效性，它成为了实时应用中最受欢迎的通信协议之一。
2. 使用 Node.js 和 WebSocket 创建应用
接下来，我们使用 Node.js 和 WebSocket 实现一个简单的聊天室应用。在实现之前，需要安装 Node.js 和 ws 库。可以通过以下命令在系统中安装：
npm install node npm install ws
在安装完成后，我们可以创建一个聊天室的服务器端，如下所示：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
-------------- --- ------ -------------
------------------------ ----------------- -
---------------------- ---- ---------
---------------------------- -------- -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
-------------- ---------- -
-------------- ------ ----------------
---
---这里我们使用 Node.js 的 ws 库和 WebSocket 对象创建一个 WebSocket.Server 实例，并监听 8080 端口。同时，我们通过 wss.clients 获得所有连接的客户端，通过 ws.send 发送消息到所有连接的客户端。
在服务器端完成后，我们可以通过以下代码创建客户端：
-- -------------------- ---- ------- --- --------- - -------------- ----- -- - --- --------------------------------- ------------- ---------- - ---------------------- -- ---------- --- ---------------- -------- -------------- - ------------------ ---
在客户端创立连接之后，我们可以向服务器发送消息：
ws.send('Hello, WebSocket!');通过以上的实现，我们完成了一个最基本的聊天室的应用。
3. 扩展应用功能
在实现基本功能之后，我们可以对应用进行扩展。例如，可以添加登录、设置房间、发送私人消息等功能。
3.1 登录
在服务器中，我们需要判断客户端发来的数据是否为登录请求，并将其保存在线用户列表中。具体实现如下：
-- -------------------- ---- -------
--- ----- - --- ------
-------------------- -------- -------------- -
-------------- --- ------ -------------
------------------------ ----------------- -
-- ------------------------------ -
--- -------- - ----------------------
------------------- ----
---------------------------- ------------ -
-- ------------------ --- --------------- -
--------------------------------------
-
---
-------
-
---------------------- ---- ---------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------
-
---
---
-------------- ---------- -
--- ---- ----- ------ -- ------ -
-- ------ --- --- -
------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------------------
-
---
-
-
-------------- ------ ----------------
---
---客户端发送登录信息如下：
ws.send('login:ZhangSan');3.2 设置房间
在服务器中，我们可以通过添加房间内存列表，可以将在线用户归类到自己的房间中。具体实现如下：
-- -------------------- ---- -------
--- ----- - --- ------
--- ------- - --- ------
-------------------- -------- -------------- -
-------------- --- ------ -------------
------------------------ ----------------- -
-- ------------------------------ -
--- -------- - ----------------------
------------------- ----
-- ------------------------ -
--------------------------------------
- ---- -
---------------------- - -------- ---
-
---------------------------- ------------ -
-- ------------------ --- --------------- -
--------------------------------------
-
---
-------
-
-- ----------------------------- -
--- -------- - ----------------------
--- -------- - ----------------------
--- ------------
-- ----------------------- -
----------- - ----------------------
- ---- -
----------- - - -------- --
--------------------- -------------
-
---------------------------
--------------------------------------
-------------------------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------------------------------------
-
---
-------
-
---------------------- ---- ---------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------
-
---
---
-------------- ---------- -
--- ---- ----- ------ -- ------ -
-- ------ --- --- -
--- ---- ---------- --------- -- -------- -
-- ------------------------ -
---------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
----------------------------------------------
-
---
-
-
------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------------------
-
---
-
-
-------------- ------ ----------------
---
---客户端发送设置房间信息如下：
ws.send('room:ZhangSan:game');3.3 发送私人消息
私人消息发送需要知道发送者和接收者，可以通过在消息体中添加发送者和接收者信息实现。具体实现如下：
-- -------------------- ---- -------
-------------------- -------- -------------- -
-------------- --- ------ -------------
------------------------ ----------------- -
-- ------------------------------ -
--- -------- - ----------------------
------------------- ----
-- ------------------------ -
--------------------------------------
- ---- -
---------------------- - -------- ---
-
---------------------------- ------------ -
-- ------------------ --- --------------- -
--------------------------------------
-
---
-------
-
-- ----------------------------- -
--- -------- - ----------------------
--- -------- - ----------------------
--- ------------
-- ----------------------- -
----------- - ----------------------
- ---- -
----------- - - -------- --
--------------------- -------------
-
---------------------------
--------------------------------------
-------------------------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------------------------------------
-
---
-------
-
-- --------------------------- -
--- ------ - ----------------------
--- -------- - ----------------------
--- --- - ----------------------
-- --------------------- -
---------------------------------------------------
-------------------------------------------------
- ---- -
-------------------------------------------------
-
-------
-
---------------------- ---- ---------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------
-
---
---
-------------- ---------- -
--- ---- ----- ------ -- ------ -
-- ------ --- --- -
--- ---- ---------- --------- -- -------- -
-- ------------------------ -
---------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
----------------------------------------------
-
---
-
-
------------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------------------
-
---
-
-
-------------- ------ ----------------
---
---客户端发送私人消息信息如下：
ws.send('to:ZhangSan:LiSi:Hello');4. 总结
通过以上的应用实现和功能扩展，我们可以更加深入理解 Node.js 和 WebSocket 的使用，同时学习到如何通过 WebSocket 实现即时通信。
在实际开发中，WebSocket 不仅适用于聊天室应用，还可以应用于实时翻译、实时定位、在线协作、多人游戏等各种应用场景。对于前端开发者来说，学习 WebSocket 是必不可少的一项技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fc01448841e9894de6f80