在今天的互联网时代，人们之间交流的方式越来越多元化，除了传统的通讯方式之外，实时聊天应用程序也变得越来越流行。而构建实时聊天应用程序的最佳方案就是使用 Node.js 和 Express.js 这两个技术。
Node.js 和 Express.js 简介
Node.js 是一个基于 Chrome V8 引擎的开放源代码，用于编写后端服务器应用程序的 JavaScript 运行时环境。Node.js 还提供了面向流的、事件驱动的 I/O 机制，使得它能够非常适合用于实时应用程序开发。
Express.js 则是基于 Node.js 平台的 Web 开发框架，它可以简化 Web 应用程序的开发。它提供了易于使用的路由、中间件和模板引擎等功能，使得开发者可以更加轻松地创建 Web 应用程序。
构建实时聊天应用程序的步骤
安装 Node.js 和 Express.js
首先需要在本地安装 Node.js 和 Express.js。安装方法如下：
npm install -g express
创建项目目录
在本地新建一个文件夹作为项目的存储目录，并使用以下命令初始化项目：
npm init安装 socket.io 库
socket.io 是一个流行的实时聊天库，它可以在 Web 应用程序和服务器之间建立实时连接。安装方法如下：
npm install --save socket.io
编写服务器端代码
在项目目录下创建一个 app.js 文件，编写以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ---------------------------- ----- -- - --------------------------- -------------------------------- - ------------ ------------ ------------- ----- ---------------------- - --------------- --- ----- ----- - --- ------------------- ----------------- -------------- ---- ------------ -------------- ---------- --------------- ------------------------- - - -- ------------- --------------- - -------------- ---------------------------- ------------- ------ ------- --- ----------------------- ----------- --------------------------- - - ---------------- -------------------------------------------- --- ------------- ------ ------- --- --------------- --------- --------------- --------------------------- - -- - - -------------- ------------- --------- - --------- ---------------- -------- ------------ --- --- --- ----------------- ----------- ---------------------- -- --------- ---
展开代码这段代码中，首先引入了必要的库，然后创建了一个 Express 应用程序，并使用 socket.io 库创建了一个 Socket.IO 实例。接着，使用 express.static 中间件将 public 目录设置为静态资源目录，并使用 app.get() 方法在根路由显示 index.html 页面。
最后，在 Socket.IO 实例上监听连接事件，并编写了收到 set username 事件、disconnect 事件和 chat message 事件时执行的代码。
编写客户端代码
在 public 目录下创建一个 index.html 文件，编写以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------- ------------ ------- ------ ---- ------------------- ------ ------ -------------------- ---- ----------------- ------ ----------- ------------- ---------------- ------ ------------- ---------- ---------- ------- ------ ---- ---------- --- ------------------- ------ ------ ----------- ------------ ------------------- --------------------- ------- ------ ------- --------------------------------------- ------- -------------------------- ------- -------
展开代码创建 client.js 文件并编写以下代码：
-- -------------------- ---- ------- ----- ------ - ----- ----- -------- - ------------------------------------ --------------------------------------------------------- ------------ ------------------- ----- -------- - ----------------------------------- ----------------- --------- --------- ----------------- -------------- - --- ------ ------ --- --------------- --------- --------------- ----- -- - ----------------------------- -------------- - ------------- - -- - - ------------- ------------------------- --- --------------- ------ ---------------- ------------------- --- ------------------------------------------------------------------- ------------ ------------------- ----- ------------- - ------------------------------------ ----- -------- - -------------------- ---------------- ---------- ---------- ----------- ------------------- - --- ------------------------------------------------------ - ------- ------ ------ ---
展开代码在 client.js 中，首先声明了一个 socket.io 实例，并在表单提交时使用 socket.emit() 方法发送一个 chat message 事件到服务器。然后使用 socket.on() 方法监听 chat message 事件，并在收到事件时在页面上创建一个新的 li 元素，并把消息内容显示在其中。
最后，使用 socket.on() 方法监听 user list 事件，并在收到事件时在控制台中显示用户列表。还声明了一个表单提交事件，当用户输入用户名并提交表单时，将 username 发送到服务器，并将用户列表隐藏。
运行应用程序
最后，在命令行中运行以下命令启动应用程序：
node app.js
在浏览器中访问 http://localhost:3000，可以看到一个输入框，让用户输入用户名并设置，然后即可开始使用实时聊天程序了。
总结
使用 Node.js 和 Express.js 构建实时聊天应用程序是一个简单而强大的方案。本文介绍了使用 socket.io 库创建实时连接的步骤，以及通过编写服务器端和客户端 JavaScript 代码实现完整实时聊天应用程序的方法。这个应用程序具有学习价值，可以用作类似项目的参考，也可以作为工作中的模板，加快应用程序的开发速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469979a968c7c53b0976181
