如何使用 Socket.io 搭建聊天应用
随着现代互联网技术的发展，人与人之间的交流方式也愈发多元化。在网络上，聊天应用可以为人们提供即时的沟通交流，使得人们之间的距离感降低，也方便了人们的社交活动。
socket.io 是一个基于 WebSockets 的实时双向通讯库，它能够以简便的方式实现实时通讯。在本篇文章中，我们将利用 socket.io 库搭建一个简单的聊天应用，来帮助读者理解如何使用 socket.io 来实现实时通讯。
- 项目初始化
首先，需要在本地安装 Node.js 环境。在完成安装后，我们需要新建一个文件夹来存放我们的项目。
然后，我们在项目文件夹内执行如下命令：
npm init -y npm install express socket.io
这里我们通过 npm 命令初始化一个空的项目，并下载 express 和 socket.io 两个库文件。其中 express 是一个常用的 Node.js web 应用框架，而 socket.io 是一个实现实时通讯的库文件。
- 搭建服务器
我们需要首先创建一个 Node.js 服务器，并在服务器上启用 socket.io 库。在项目文件夹下，新建一个 server.js 文件，并填写如下内容:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- -------- - --------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ------ - ----------------------- ----- -- - ----------------- ----- ---- - ---------------- -- ----- -------------------------------- - ------------ ------------------- -------- -- - ----------------- ------------ ----------------------- -- -- - ----------------- --------------- --- --- ------------------- -- -- - ------------------- --------- -- ---- ---------- ---展开代码
这里我们创建了一个基于 express 的 http 服务器，并在服务器上启动了 socket.io 库。然后，我们启用端口 3000 来进行通讯，同时将 public 文件夹设置为静态文件夹以供客户端使用。
创建并启动该服务器后，打开浏览器，在地址栏中输入 localhost:3000，如果能够看到默认页面，则说明我们已经成功启动了服务器。
- 实现 socket.io 的客户端脚本
我们需要在客户端引入 socket.io 的 CD 结构，并新建一个 script.js 文件来实现相关的逻辑。在 public 文件夹下，新建一个 index.html 文件，并填写如下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ------------------- ------- --------------------------------------- ------- ------------------------- ------- ------ ------- -------展开代码
这里我们在 head 标签中引入了 socket.io 的客户端脚本。
接下来，我们在 script.js 中填写如下内容：
-- -------------------- ---- ------- ----- ------ - ----- -------------------- -- -- - ---------------------- -- --------- --- ----------------------- -- -- - ------------------------- ---- --------- ---展开代码
这里我们对 socket.io 模块进行连接，并添加了连接与断开连接使用的事件。在客户端运行该程序后，我们可以在控制台中看到是否成功连接服务器。
- 实现聊天室逻辑
在连接上服务器之后，我们需要在服务器端和客户端之间实现一些数据传输的逻辑，这样才能实现聊天室的实时通讯功能。具体来说，我们需要完成以下几个步骤：
在服务器端，监听 socket.io 的 connection 事件，当有用户连接成功后，我们需要创建一个新的房间，并将该用户加入房间中：
-- -------------------- ---- ------- ------------------- -------- -- - ----------------- ------------ ----------------- ---- ----------------------- -- -- - ----------------- --------------- --- ---展开代码
在客户端，我们需要构造一个与服务器交互的表单以便用户输入聊天信息。具体来说，我们需要在 index.html 文件中加入一个 form 标签，用于输入字符串信息，并添加与之相关的逻辑：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ------------------- ------- --------------------------------------- ------- ------------------------- ------- ------ -------- ---------------- ---- ---------- --- ------------------- ------ ------ ----------------- ----------- ----------------- -------- ------------------- --------------------- ------- ------ ------- -------展开代码
-- -------------------- ---- ------- ----- ------------- ---------------------------------------- ----- ---- - ------------------------------- ----- -------- - ------------------------------------ ------------------------------- --- -- - ------------------- -------------------------- -------------------- ------------------ - --- ---展开代码
这里我们使用了 DOM 操作来获取输入框和表单元素，使用了 emit 方法来触发 sendMessage 事件，并将输入的信息作为参数传递给服务器。
在服务器端，我们需要监听 sendMessage 事件，并在该事件触发时，向所有的客户端广播该信息：
-- -------------------- ---- ------- ------------------- -------- -- - ----------------- ------------ ----------------- ---- ------------------------ --------- -- - ----------- ------------------- --------- --- ----------------------- -- -- - ----------------- --------------- --- ---展开代码
这里我们使用了 to 方法将信息广播给加入房间 1 中的所有用户。
在客户端，我们需要接收服务器发送的消息，并将消息展示在页面上，我们可以在 script.js 中添加如下代码：
socket.on('message', (message) => { const li = document.createElement('li'); li.textContent = message; messages.appendChild(li); });
至此，我们就完成了聊天室的搭建和实时通讯功能的实现。
对于想要更深入了解 socket.io 库的读者，可以参考官方文档，深入了解 socket.io 库的各个功能和参数设置。同时，在实际使用 socket.io 时，需要注意代码安全性和效率性，防止恶意攻击和性能瓶颈的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb0872306f20b3a6a505cd
