在现今的互联网世界里，实时通讯已经成为了不可或缺的一部分。无论是社交网络、在线游戏还是在线客服，都需要实时通讯来满足用户需求。而 WebSocket 是实现实时通讯的最佳选择之一。本文将介绍如何使用 Express.js 和 WebSocket 来构建完整的即时聊天系统。
准备工作
在开始之前，您需要准备以下环境和工具：
- Node.js （本文以最新版本为例）
- npm （Node.js 的包管理工具）
- Express.js （一个基于 Node.js 平台的 web 应用开发框架）
- ws （一个 Node.js 的 WebSocket 库）
快速开始
----- -------- -- -------- --- ---- -- --- ------- ------- --
现在，我们可以开始编写代码了。
-- ------
----- ------- - ------------------
----- -- - -------------
----- --- - ---------
---------------------------------
----- ------ - ---------------- -- -- -
------------------- ------- -- ---- ------
--
----- --- - --- ----------- ------ --
-------------------- ---- -- -
------------------- -----------
---------------- --------- -- -
--------------------- -------- ------------
---------------------------- -- -
-- ------- --- -- -- ----------------- --- -------- -
--------------------
-
--
--
-------------- -- -- -
------------------- --------------
--
--根据上述代码，我们创建了一个 Express.js 应用，并将 public 目录作为静态文件目录。同时，我们在端口 3000 上启动了服务器，并创建了一个 WebSocket 服务器以在客户端与服务器之间进行通讯。
wss.on('connection', ...) 监听了 WebSocket 客户端的连接事件，并通过 ws.on('message', ...) 监听了客户端发送的消息事件。所有客户端都通过 wss.clients 遍历，并确定应该哪个客户端应该接收消息。
代码能够运行，但我们还需要添加前端页面。接下来，我们要编写一个简单的界面，并将 WebSocket 添加到前端以与服务器通讯。
---- ----------------- ---
--------- -----
----- ----------
------
----- ----------------
----------- ------------
-------
------
------
------ ----------- ----------------- ------------------ - ------------
------- ---------------------------
-------
--- ----------------------
--------
----- ------ - --- --------------------------------
----- ------------ - ---------------------------------------
----- ----------- - --------------------------------------
--------------------
---------------------------------------- ------- -- -
-- -------------- --- --- -
-------------
-
--
--------------------------------------------------------- ------- -- -
----------------------
-------------
--
-------- ------------- -
----- ------- - -------------------------
-- ---------- ------
--------------------
------------------ - --
--------------------
-
---------------------------------- ------- -- -
----- ------- - ----------
----- ----------- - ----------------------------
----------------------- - -------
-------------------------------
--
---------
-------
-------以上代码为聊天室页面的 HTML 文件。我们添加一个文本输入框、一个发送按钮和一个消息列表。这里创建一个 WebSocket 对象并连接到服务器。我们监听消息输入框中的键盘输入事件和发送按钮的点击事件来发送消息。然后，我们通过 WebSocket 对象绑定 message 事件来接收服务器发送的消息，并用 DOM API 将之前接收到的该消息添加到消息列表中。
现在，我们可以运行服务器并在浏览器中打开聊天室页面。
---- ------
浏览器打开 http://localhost:3000/ 之后，您可以在页面中输入消息，然后点击发送按钮将其发送到服务器。当服务器收到消息时，它将消息广播给所有客户端。
探索更多
现在，你已经完成了一个基本的聊天室应用程序。但是，它仍有很多局限性。例如，我们没有对用户进行任何验证或授权，您可以探索下列问题：
- 认证授权：您可以添加用户身份验证和授权来确保只有受信任的用户可以访问您的聊天室。
- 实时性：当前的实现仅使用单个 WebSocket 服务器，这在大型应用程序中可能会导致性能瓶颈。您可以探索使用负载平衡器和群集来扩展 WebSocket 服务器以满足更高的并发量。
- 异常处理：目前，我们忽略了与 WebSocket 服务器的任何通信问题。您可以对这些错误进行处理并在发生错误时向客户端发出警告或错误消息。
总结
在本文中，我们介绍了如何使用 Express.js 和 WebSocket 来构建一个简单的聊天室应用程序。这是一个适合入门的示例，可帮助您了解如何使用这两种技术构建实时应用程序。最后，希望本文能够对您对实时应用程序的开发有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64adae0b48841e98949b944d