介绍
本文将指导你在 Node.js 和 Express 的基础上建立一个实时聊天室。Node.js 是一个基于事件驱动的异步 I/O 模型，非常适合构建网络应用程序。而 Express 是一个流行的 Web 框架，它简化了 Node.js 的开发过程。通过本文的学习，你将学到如何使用 Socket.IO 实现实时通信，以及如何利用 Express 框架搭建聊天室后台。
建立 Express 后台
首先，我们要建立 Express 的后台。打开终端，输入如下命令：
--- ------- -------
然后，新建一个名为 server.js 的文件，输入以下代码：
----- ------- - ------------------- ----- --- - ---------- -------------------------------- - ------------ ------------ ----- ---- -- - ---------------------- - --------------- --- ----- ------ - ---------------- -- -- - ------------------- ------- -- ---- ------- ---
在上面的代码中，我们创建了一个 Express 应用，使用 express.static 方法指定静态资源所在的目录。我们还创建了一个路由来渲染聊天室的主页面。最后，我们启动了服务器并监听 3000 端口。
现在，我们可以在根目录下创建一个名为 public 的文件夹，在其中创建一个名为 index.html 的文件，用于展示聊天室的页面。
使用 Socket.IO 实现实时通信
接下来，我们将使用 Socket.IO 实现实时通信。打开终端，输入如下命令：
--- ------- ---------
然后，在 server.js 文件中添加以下代码：
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
-------------- ---- ---------------
---
---首先，我们引入 Socket.IO 并将其与之前创建的服务器实例关联。然后，我们使用 io.on 方法监听 'connection' 事件。每当有一个新的客户端连接时，就会触发该事件。我们可以在回调函数中输出一条日志来显示有用户连接了。
接下来，我们监听 'disconnect' 事件。当有客户端与服务器断开连接时，就会触发该事件。我们可以在回调函数中输出一条日志来显示有用户断开了连接。
现在，我们可以在 public 文件夹中创建一个名为 main.js 的文件，在其中添加以下代码：
----- ------ - ----- -------------------- -- -- - ---------------------- -- --------- --- ----------------------- -- -- - ------------------------- ---- --------- ---
在上面的代码中，我们首先创建了一个 Socket.IO 客户端，并使用 socket.on 方法监听 'connect' 事件。当客户端连接到服务器时，就会触发该事件。我们可以在回调函数中输出一条日志来显示客户端已经连接到服务器。
接下来，我们使用 socket.on 方法监听 'disconnect' 事件。当客户端与服务器断开连接时，就会触发该事件。我们可以在回调函数中输出一条日志来显示客户端已经与服务器断开连接。
实现聊天室功能
现在，我们已经实现了实时通信的基础功能，接下来我们将添加聊天室的功能。在 public 文件夹中，创建一个名为 chat.js 的文件，并添加以下代码：
----- ----------- - ----------------------------------------
----- ------------ - -----------------------------------------
----- -------- - ------------------------------------
----- ------ - -----
-------------------- -- -- -
---------------------- -- ---------
---
----------------------- -- -- -
------------------------- ---- ---------
---
----------------------- --------- -- -
----- -- - -----------------------------
-------------- - ----------------- -----------------
-------------------------
---
-------------------------------------- --- -- -
-------------------
---------------------------- -
----- -------
----- ------------------
---
------------------ - ---
---在上面的代码中，我们首先获取聊天室页面中的相关元素，包括消息表单、消息输入框和消息列表。然后，我们创建了一个 Socket.IO 客户端。
在客户端连接到服务器后，我们使用 socket.on 方法监听 'newMessage' 事件。当服务器发送新消息时，就会触发该事件。我们可以在回调函数中创建一个 <li> 元素，并将消息显示在该元素中。最后，我们将该元素添加到消息列表中。
接下来，我们使用 messageForm.addEventListener 方法监听消息表单的 'submit' 事件。当用户提交表单时，就会触发该事件。我们使用 socket.emit 方法向服务器发送一个 'createMessage' 事件，并传递一个包含用户信息和消息文本的对象。最后，我们清空消息输入框。
最后，在 server.js 文件中添加以下代码：
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
-------------- ---- ---------------
---
-------------------------- --------- -- -
-------------------- ----------- ---------
--------------------- -
----- -------------
----- ------------
---
---
---在上面的代码中，我们使用 socket.on 方法监听客户端发送的 'createMessage' 事件。当客户端发送该事件时，就会触发该事件，并向服务器传递一个包含用户信息和消息文本的对象。
在回调函数中，我们输出一条日志来显示收到了该消息。然后，我们使用 io.emit 方法向各个客户端发送一个 'newMessage' 事件，并传递一个包含用户信息和消息文本的对象。这样，我们就实现了实时聊天室的功能。
总结
通过本文的学习，你已经知道如何使用 Node.js 和 Express 搭建实时聊天室，并且掌握了 Socket.IO 的使用方法。有了这些知识，你可以更好地开发基于实时通信的 Web 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647aa754968c7c53b065586e