WebSocket 和 Socket.io 是现代网络应用开发中经常使用的技术，它们能够快速建立客户端和服务器之间的双向通信连接，支持实时推送和处理大量的数据。
本文将介绍如何基于 WebSocket 和 Socket.io 实现一个简单的在线聊天室，并提供完整的代码示例和详细的开发指导，内容适合于前端工程师和初学者进行学习和实践。
前置知识
在阅读本文之前，需要掌握以下知识：
- 前端开发基础知识，如 HTML、CSS 和 JavaScript；
- Node.js 的基础知识，并且已经安装并配置好开发环境；
- Express 框架的基础知识，本文中使用 Express 作为后端框架。
准备工作
首先，我们需要创建一个新的 Node.js 项目，并在项目目录下安装 Express 和 Socket.io 依赖。
mkdir chatroom cd chatroom npm init -y npm install express socket.io
然后，在项目目录下创建 public 和 views 目录，并在 public 目录下创建 js、css 和 img 子目录，用于存放前端资源文件。
mkdir public views cd public mkdir js css img
在 views 目录下创建 index.html 文件，用于编写前端页面。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------
----- ---------------- --------------------- --
-------
------
---- ----------
--- -------------------
----- ----------
------ ------------------ ------------------ --
------- ----------------------------
-------
------
------- ---------------------------------------
------- -----------------------------
-------
-------在 public/css 目录下创建 style.css 文件，编写前端样式。
-- -------------------- ---- -------
- -
-------- --
------- --
----------- -----------
------------ -------------- ------------------- ------ ---- ------- ---------- ------ -----------
------ ----- ------- ------ -- ------- ------ -- --------
-
---- -
----------------- --------
-
----- -
------- ---- -----
------ ------
----------------- -----
----------- - - ---- ------- -- -- -----
-------------- -----
--------- -------
-
--------- -
----------- -----
------- --
-------- -----
----------- ------
----------- -----
-
--------- -- -
-------- -----
-------------- --- ----- -----
-
--------- ------------- -
-------------- -----
-
----- -
-------- -----
------------ -------
---------------- -------
-------- -----
-
-------------- -
----- --
-------- -----
-------------- ----
------- -----
------------- -----
-
------------ -
-------- -----
-------------- ----
------- -----
----------------- --------
------ -----
------- --------
-在 public/js 目录下创建 client.js 文件，编写前端 JavaScript 代码。
-- -------------------- ---- -------
----- ------ - -----
----- ------------ - ------------------------------------
----- ------------ - -----------------------------------------
----- ---------- - ---------------------------------------
-------- -------------------- -
----------------- --------- ---------
-
-------- ------------------- -
----- ---- - -----------------------------
---------------- - --------
-------------------------------
-
------------------------------------ ------- -- -
-----------------------
-- -------------------- -
--------------------------------
--------------- - --------------------
------------------ - ---
-
---
--------------- --------- --------- -- -
---------------- - ---------
---接着，我们在项目目录下创建 app.js 文件，作为服务器入口文件。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------------
----- -- - ---------------------------
----------------------------------
------------ ----- ---- -- -
---------------------- - ---------------------
---
------------------- -------- -- -
--------------- --------- --------- -- -
------------- --------- ---------
---
---
----------------- -- -- -
---------------------- -- ---------
---最后，我们可以在命令行中启动项目并访问 http://localhost:3000 查看效果了。
node app.js
开发实战
在上面的准备工作中，我们已经通过 Express 和 Socket.io 创建了一个简单的在线聊天室。接下来，我们将对这个聊天室进行功能扩展和优化。
用户名和房间号
在聊天室中，用户可能需要输入用户名和房间号来加入一个特定的聊天室，这就需要前端能够向服务器发送一些特定的信息。我们可以在前端页面中添加一个表单，让用户输入这些信息，并修改前端 JavaScript 代码。
<form id="form"> <input id="username-input" type="text" placeholder="用户名" /> <input id="room-input" type="text" placeholder="房间号" /> <input id="message-input" type="text" placeholder="请输入消息" autocomplete="off" /> <button id="send-button">发送</button> </form>
-- -------------------- ---- -------
----- ------ - -----
----- ------------ - ------------------------------------
----- ------------- - ------------------------------------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
----- ---------- - ---------------------------------------
-------- -------------------- -
----------------- --------- ---------
-
-------- ------------------- -
----- ---- - -----------------------------
---------------- - --------
-------------------------------
-
------------------------------------ ------- -- -
-----------------------
-- -------------------- -
-------------
--------- ------------------- -- -------
----- --------------- -- -------
-------- ------------------
---
------------------------------ - --- - --------------------
------------------ - ---
-
---
--------------- --------- ------ -- -
-- ---------- --- ---------------- -- -------- -
------------------------ - --- - --------------
-
---修改前端代码之后，我们还需要修改服务器代码来处理新的信息类型。在服务器端，我们需要为每个连接维护一个用户名和所在房间的信息，并在收到聊天消息时发送给所有连接，让它们进行处理。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------------
----- -- - ---------------------------
----------------------------------
------------ ----- ---- -- -
---------------------- - ---------------------
---
----- ----- - ---
------------------- -------- -- -
--------------- --------- ------ -- -
----- - ----- -------- -------- - - -----
-- ------------------- -
---------------- - - --------- ---- --
------------------
-
---------------------- --------- - --------- -------- ---- ---
---
----------------------- -- -- -
-- ------------------ -
----- - ---- - - -----------------
------ -----------------
------------------------ --------- -
-------- -----------
-----
---
-
---
---
----------------- -- -- -
---------------------- -- ---------
---在服务器代码中，我们维护了一个 users 对象，用于保存每个连接对应的用户名和房间号。当收到聊天消息时，我们通过 socket.id 获取当前连接的信息，并将其加入到对应的房间中，然后将消息发送给该房间中的所有连接。
系统提示信息
在聊天室中，一些系统事件发生时可能需要向用户发送一些提示信息，比如当一个用户加入或离开聊天室时。我们可以在服务器端发送这些提示信息，让前端通过特定的事件来处理这些信息。
-- -------------------- ---- -------
----- ------ - -----
-- ---
----------------- --------- ------ -- -
-- ---------- --- ---------------- -- -------- -
-----------------------------------
-
----- -------------------- ---- -------
------------------- -------- -- -
--------------- --------- ------ -- -
-- ---
---
----------------------- -- -- -
-- ------------------ -
----- - ----- -------- - - -----------------
------ -----------------
------------------------ --------- -
-------- --------------------
-----
---
-
---
----- - ---- - - -----------------------
------------------
------------------- --------- - -------- ---------- ---- ---
---在服务器端，我们在连接成功时就加入了对应的房间，并向该房间中的所有连接发送一条欢迎信息。当一个连接离开时，我们也向该房间中的所有连接发送一条系统消息，提示其谁离开了聊天室。
名称不重复
在聊天室中，每个人都应该有独立的名称，因此我们需要在用户名重复时进行处理。我们可以在服务器代码中保存所有已使用的用户名，并在接收到聊天消息时进行验证，如果发现当前用户名已经存在，就让用户重新选择一个新的用户名。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------------
----- -- - ---------------------------
----------------------------------
------------ ----- ---- -- -
---------------------- - ---------------------
---
----- ----- - ---
-------- ----------------------- -
--- ------ -- -- ------ -
-- ------------------- --- --------- -
------ ------
-
-
------ -----
-
------------------- -------- -- -
--------------- --------- ------ -- -
----- - ----- -------- -------- - - -----
-- ------------------- -
-- -------------------------- -
------------------- --------- -
-------- ----------------
-----
---
-------
-
---------------- - - --------- ---- --
------------------
-
---------------------- --------- - --------- -------- ---- ---
---
-- ---
---
----------------- -- -- -
---------------------- -- ---------
---在服务器代码中，我们定义了 checkUsername 函数，用于检查当前用户名是否已经被使用。在接收到聊天消息时，我们首先判断当前连接是否已经有了用户名信息，如果没有，则检查用户名是否被占用，如果没有被占用就将其保存，并加入到对应的房间中，否则就发送一条系统消息，提示用户重新选择用户名。
总结
本文详细介绍了基于 WebSocket 和 Socket.io 实现的在线聊天室的开发实战，并提供了完整的代码示例和详细的开发指导。通过阅读本文，读者可以掌握如何使用 Socket.io 实现一个实时通信的应用，了解如何处理多种事件、发送多种消息，并学习如何优化应用性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6582e5a5d2f5e1655ddf5107