nodejs+express搭建多人聊天室步骤

搭建简易多人聊天室：Node.js与Express的实践教程

前言

大家好！今天我要带大家搭建一个简易的多人聊天室，通过Node.js和Express框架来实现。这个项目适合那些实战较少的同学，通过实践来巩固理论知识。准备好了吗？让我们开始吧！

准备工作

我们需要新建一个文件夹并命名为“chatroom”。在终端输入以下命令，生成一个package.json文件。如果你还没有安装node和npm，请先去官网下载并安装。接下来，我们需要安装express和socket.io。

安装完成后，我们的package.json文件如下：

{

"name": "chatroom",

"version": "1.0.0",

"description": "A simple chatroom",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"dependencies": {

"express": "^4.16.2",

"socket.io": "^2.0.4"

},

"repository": {

"type": "git",

"url": "

},

"keywords": [

"chatroom",

"nodejs",

"express"

],

"author": "ddvdd",

"license": "ISC",

"bugs": {

"url": "

},

"homepage": "

}

接下来，我们将开始搭建web服务器。我们将使用express框架创建后端服务，并使用socket.io建立客户端和服务端之间的持久链接，以便进行实时通讯。这是我们的第一步。让我们创建一个app.js文件，开始实现吧！首先引入express模块并创建一个express实例。然后，我们将使用http模块创建一个服务器并监听指定的端口。当服务器启动时，我们将在控制台输出一条消息。接下来，我们将创建一个处理根路由的中间件函数，当用户访问我们的服务器时，我们将重定向到聊天页面。这就是我们的基本服务器设置。接下来，我们将实现更多的功能，如处理用户消息、存储用户状态等。在这个过程中，我们将使用socket.io来处理实时通讯。这是一个非常强大的工具，它允许我们在客户端和服务端之间建立双向通信。我们将在后续的步骤中详细介绍如何使用它来实现聊天功能。请持续关注我们的教程，让我们一起完成这个有趣的项目吧！

搭建web服务器

现在我们已经准备好了开始搭建web服务器了。我们将使用express框架来创建我们的后端服务。首先创建一个app.js文件，然后引入express模块并创建一个express实例。接下来我们将创建一个处理get请求的路由函数来处理根路由的请求。当用户访问我们的服务器时，我们将重定向到聊天页面。在这个过程中我们会使用到一些Node.js的核心模块如http、fs（文件操作）和path（路径处理）。在后续的步骤中我们会进一步介绍如何使用这些模块来实现更复杂的功能如处理用户消息、存储用户状态等。同时我们也会介绍如何使用socket.io来实现实时通讯的功能让聊天室更加实时交互性更强。请大家持续关注我们的教程一起学习进步！当浏览器请求根路由'/'时，我们将其重定向到'127.0.0.1:3000/chat.html'。让我们深入一下这个重定向背后的故事。

当我们谈论'/chat.html'，实际上是在谈论一个被重定向的路径。在服务器应用中，我们使用了Express框架来处理这个路由。对于每一个请求到'/chat.html'的路由，我们的服务器都会读取并返回对应的HTML文件。这个过程涉及到文件系统的读取操作，即使用fs模块的readFile方法。这个方法接收一个文件路径和一个回调函数，其中路径通过path模块的join方法进行格式化。当读取文件发生错误时，服务器会记录错误信息并向浏览器返回404状态码；如果读取成功，服务器会将文件内容发送给浏览器。

随着Express的强大中间件功能，我们可以更简洁地实现这一功能。通过使用express.static中间件，我们可以轻松地托管静态资源文件。这意味着，我们只需一行代码就可以替代之前复杂的路由处理逻辑。这样，只要请求的路径符合一定的规则（例如'127.0.0.1:3000/XXX/AAA'），Express就会去对应的public文件夹下查找并发送文件。

当我们谈论socket.io时，我们在创建一个客户端和服务器之间的长久链接。为了实现这一点，我们首先在app.js中引入了socket.io模块，并通过它将socket的监听添加到由Express实例创建的服务器上。这一步是建立实时、双向和基于事件的通信的关键。

让我们回顾一下改造后的代码：我们引入了必要的模块，包括Express、socket.io和路径处理模块path。然后，我们设置了服务器在3000端口上监听请求，并在控制台输出相关信息。我们使用了Express的静态资源托管功能来简化文件服务的过程。这样，我们只需一行代码就可以托管public文件夹中的所有静态资源。

在神秘的socket世界中，每一次连接都像是心跳一样重要的脉搏跳动。我们需要在`io.on('connection', (socket) => {...}`里，倾听那悠扬的旋律，感受每一次新的连接诞生。这个特定的回调函数，就像是为每一个新访客准备的欢迎曲。当你执行app.js时，背后强大的代码世界开始运转。只需在终端里输入“node app.js”，启动的服务器就像一座灯塔，静静地等待着者的到来。

现在，让我们打开浏览器，访问那个神秘的地址

为了赋予这个空间生命，我们需要在项目的根目录创建一个public文件夹，并在其中放置我们的chat.html文件。这个文件是我们的入场券，也是我们与服务器交流的桥梁。

让我们来看看这个简单的HTML文件：

```html

这是我们的聊天室。

```

刷新页面，一幅简洁的聊天室画面便跃然眼前。这仅仅是一个开始，我们的之旅才刚刚开始。接下来，我们要为这个简单的页面注入更多的活力，让服务器后端也能参与其中，共同演绎这场多人聊天室的华丽乐章。

我们需要一个标识用户的名字，这就像是每个参与者在聊天室里的独特身份。每位用户的名字都会被存储下来，不仅客户端需要知道它，服务器也需要识别它。每次信息的传输都会伴随着这个名字，确保每个人都能知道是谁在发言。接下来，我们会逐渐为这个聊天室添加更多的功能，让它从一个简单的框架变成一个充满活力的社交平台。在喧嚣与宁静之间，我们的群聊功能与登录页面逐渐成形。让我们更深入地了解并重塑这两个重要功能的细节。在信息海洋中，我们需要清晰地区分来自对方和己方的信息。这不仅是一项技术的挑战，更是对用户友好体验的追求。

登录功能逐步展现

我们重新设计了登录界面。这是一个基本的起点，由一个用户名输入框和登录按钮组成。这个简单的界面设计仿佛一个通往数字世界的门户，邀请用户进入。而背后，服务器正在静静地等待，准备迎接每一位新的访客。

在重构过程中，我们为登录页面添加了丰富的样式和动态效果。当用户点击登录按钮时，他们的信息将通过socket.io与服务器进行交互。服务器会对用户名进行校验，确保系统的安全。这个交互过程不仅仅是信息的传递，更是对用户体验的精细打磨。如果校验成功，客户端将根据服务器的反馈结果进入聊天页面；如果失败，则会收到相应的提示信息。这种交互设计确保了系统的稳定性和用户使用的便捷性。每当有用户成功登录时，服务器会将用户信息存入数组并保存在服务器上，这样我们可以实时追踪在线用户数量。这对于群聊功能来说至关重要，因为它确保了我们可以为用户提供实时的通信体验。因此我们的登录页面并不简单只是获取用户名和密码而已，它背后承载着确保用户顺畅交流的重要任务。

聊天室的界面设计

接下来是聊天室的界面设计。我们采用了简洁而现代的设计风格。灰色背景与清晰的布局相结合，给人一种专业而舒适的感觉。页面的标题“欢迎来到ddd聊天室”采用大胆的字体设计，吸引了用户的注意力。在页面中，“登陆”按钮下方有一个用户名输入框和一个登录按钮组成的区域，它们位于页面的中心位置，方便用户操作。同时我们采用了jQuery作为前端业务交互的实现工具，使得页面交互更加流畅和便捷。此外我们还添加了样式和动态效果来提升用户体验让用户在聊天过程中更加舒适愉悦。当用户在聊天室中与其他人交流时他们可以通过文字传递信息分享观点和经验享受与他人互动的乐趣。我们的目标是打造一个功能强大且易于使用的聊天室让每个人都能轻松愉快地与他人交流分享快乐。总的来说我们的群聊功能和登录页面设计旨在为用户提供一种流畅便捷且安全舒适的通信体验让他们能够轻松享受与他人互动的乐趣同时保障信息安全和系统稳定性是我们始终追求的目标。因此我们将继续努力优化和完善这些功能以满足用户的需求并不断提升用户体验满意度。引入所需的 SDK 至 chat.html 页面之后，我们来深化一下 `main.js` 中的登录功能。

加载 jQuery 和 Socket.io 库后，我们进入 `main.js` 的核心部分。该文件由一位名为 ddvdd 的开发者在 2018 年 2 月 8 日创建。在文档准备就绪后，我们开始初始化一些变量并连接 Socket.io 服务。

当用户通过界面输入用户名并点击登录按钮时，我们需要执行一系列的验证和操作。这一过程主要通过 `setUsername` 函数实现。该函数首先获取用户输入的用户名，然后判断用户名是否存在。若用户名存在，则通过 Socket.io 触发一个 'login' 事件，将用户名发送给服务器。若用户未输入用户名，则提示用户输入。

前端的事件处理部分监听登录按钮的点击事件。当按钮被点击时，执行 `setUsername` 函数。而在 Socket.io 的部分，我们监听 'loginResult' 事件。服务器返回的数据中包含了代码（code），我们可以通过这个代码来判断登录是否成功。

接下来是 `app.js` 的内容。该文件由 ddvdd 在 2018 年 2 月 7 日创建。在这个文件中，我们创建了一个 Express 实例并监听了 3000 端口。我们引入了必要的模块，并初始化了用户信息和在线用户数量。当服务器启动时，会在控制台输出一条信息。

对于根路由 '/' 的处理，我们使用 app.get() 中间件来匹配 get 请求。当访问根路由时，我们将请求重定向到 `/static/chat.html` 页面。

在 `chat.html` 页面加载了必要的 SDK 之后，让我们继续强化 `main.js` 中的用户登录体验。当页面准备就绪时，我们的 JavaScript 代码开始运行，并准备与 Socket.io 服务建立连接。用户可以轻松地在界面上输入他们的用户名，并点击登录按钮进行身份验证。这一过程的核心逻辑被封装在 `setUsername` 函数中。这个函数不仅获取用户输入的用户名，还确保用户名有效后才将其发送到服务器进行验证。如果用户未提供用户名，系统会友好地提醒他们输入。通过前端事件处理，我们捕捉了登录按钮的点击事件，并据此触发登录流程。在 Socket.io 部分，我们耐心等待服务器的响应并根据返回的代码来判断登录是否成功。如果一切正常，用户将被引导至聊天室页面；如果出现任何问题（如用户名已登录），系统会及时通知用户。而在服务器端，`app.js` 负责处理用户的登录请求和其他逻辑操作。当服务器启动时，它在控制台输出一条信息宣告准备就绪。当用户访问网站首页时，他们将被重定向到聊天页面开始他们的聊天体验。这就是我们的登录和聊天流程的简单描述。现在，用户只需输入用户名并登录，即可开始享受畅快的聊天体验！当我们打开浏览器并访问根路由'/'，服务器会将其重定向到聊天页面 '127.0.0.1:3000/chat.html'。这是因为我们使用了Express框架来处理路由请求。

在Node.js的Express应用中，`__dirname`是一个特殊变量，表示当前文件所在的绝对路径。为了获取public文件夹的绝对路径，我们使用`path.join`方法将`__dirname`和`public`连接起来。这样做可以避免产生诸如'././public'这样的奇怪路径。然后，通过`express.static`中间件，我们可以轻松托管public文件夹中的静态资源。任何以'127.0.0.1:3000/XXX/AAA'形式访问的路径，都会从public文件夹下的XXX文件夹中寻找AAA文件，并将其发送给浏览器。

在socket部分，当客户端与服务端建立连接时，会触发一个'connection'事件。在这个事件的回调函数中，我们监听了两个事件：'login'和'disconnect'。当客户端触发'login'事件并传入用户数据时，我们会检查该用户是否已经登录。如果用户已存在，我们会发出一个包含code为1的登录结果事件；否则，我们将用户信息存入数组，并发出一个包含code为0的登录结果事件。每当有用户断开连接时，我们会更新在线用户数量并在控制台打印当前在线人数。

关于代码中的几个关键点：

1. `socket.on`用于监听事件，后面的回调函数用于接收由`socket.emit`触发的事件传递过来的对象。

2. `socket.emit`用于触发事件并传递对象给由`socket.on`监听的回调函数。

3. 所有与socket连接相关的事件（包括登录和断开连接）都应在io的'connection'事件的回调函数中处理，因为这些事件都是在连接建立后发生的。没有正在连接的状态，就没有断开连接这一说。

4. 虽然服务器端只有一个app.js文件，但不同客户端连接后的信息是不同的。我们必须将一些公共信息（如所有登录用户的数组和所有用户发送的所有信息）存储在外部，而不是在单个的连接对象中。这是因为一旦连接断开，该连接对象中的所有数据都会丢失。

现在我们已经实现了简单的登录功能，接下来我们来写群聊功能。由于项目功能简单，我们不单独建立HTML页面来显示聊天室，直接在login页面实现聊天室的显示。通过改变class名称来实现登录后聊天室的展示切换。用户可以在登录后发送和接收消息，实现简单的群聊功能。聊天室页面重构专家版

为了优化狼蚁网站的SEO并改善用户体验，我们对聊天室页面进行了全面的重构，特别是chat.html部分。以下是经过精心设计的页面布局和样式，旨在提供一个生动、丰富的聊天体验。

页面结构以HTML5标准编写，采用简洁明了的代码风格。整个页面分为登录框和聊天框两部分，以适应不同用户的需求。

一、登录框设计

登录框位于页面顶部，采用简洁的外观设计。标题为“登录”，用户可在此输入用户名。登录按钮位于框底部，用户点击后即可进入聊天室。

二、聊天框设计

聊天框是整个页面的核心部分，分为以下几个关键区域：

1. 聊天内容区：用于显示聊天记录。我们采用了分栏布局，将聊天内容分为自我消息和其他用户消息两部分，以便用户更清晰地查看和区分消息。自我消息采用淡蓝色背景，其他用户消息采用白色背景。每条消息都带有边框，以增强视觉效果。

2. 发送消息区：位于聊天内容区下方，包含一个文本框和发送按钮。用户可以在文本框中输入要发送的消息，然后点击发送按钮将消息发送到聊天室。文本框采用固定行数和多列设计，以适应不同长度的消息。

整体页面采用响应式设计，适应各种屏幕尺寸和设备。通过优化CSS样式和布局，我们成功打造了一个生动、流畅、易于使用的聊天室页面。无论是新用户还是老用户，都能在这里享受到愉快的聊天体验。

我们还引入了jQuery和socket.io技术，以实现实时聊天功能和交互性。用户可以在线与其他人实时交流，无需等待刷新页面。这将大大提高用户的满意度和参与度。

我们的目标是打造一个功能丰富、易于使用、具有高度交互性的聊天室页面。通过优化页面布局和样式，引入先进技术，我们成功实现了这一目标，为用户提供了一个优质的聊天体验。在用户的指尖舞动间，一场虚拟的聊天盛宴即将开启。当登录流程完成后，华丽的登录框如同完成使命般悄然隐去，取而代之的是一个充满互动魅力的聊天界面。

一、登录后的华丽转身

随着“loginResult”回调的成功响应，标志着用户可以畅享聊天之旅。此刻，我们优雅地隐藏登录框，解除其绑定的事件，为聊天界面的展现腾出舞台。登录框如同舞台的幕布，缓缓落下，而聊天界面则如同璀璨的明星，逐渐走进观众的视线。

二、聊天室的欢迎仪式

在聊天界面亮相之际，我们热情地展示一行温馨的欢迎语，让用户的身份得以彰显。用户的名字被亲切地嵌入欢迎词中，仿佛是一场专属的接待仪式。聊天室标题的呈现，也为这场互动盛宴增添了更多的色彩。

三、消息传递的魔法时刻

在聊天室中，消息的传递成为了一种魔法般的体验。客户端的每一次触发，都引发服务器端的监听响应。当发送信息的事件被触发时，服务器会迅速捕捉到这一动作，将信息存储起来，并通过广播事件将信息发送给所有客户端。这样一来，消息的传递不再局限于单一的设备，而是跨越了时空的界限，实现了真正的实时互动。

四、发送消息的流畅操作

在main.js中，发送消息的功能被巧妙地实现。通过获取输入框中的聊天信息，当用户输入内容时，就可以轻松触发发送消息的事件。为了确保信息的准确性，还会对输入内容进行判断，如果为空则提示用户输入消息。这一流程的设计，既保证了操作的流畅性，又提高了用户体验。

五、服务器端的精准监听

在app.js中，服务器端的监听机制发挥着至关重要的作用。当收到发送消息的事件时，服务器会遍历用户数组，找到相应的用户并将发送的信息存储起来。随后，通过触发广播事件将信息发送给所有浏览器。这一过程的精准监听和高效处理，确保了聊天室中的信息能够实时、准确地传达给每一个用户。

六、广播事件的巧妙运用

在聊天室中，广播事件的运用也是一大亮点。通过io.emit，服务器能够真正实现信息的广播到所有浏览器。这种广播方式确保了每一条信息都能够迅速传达给所有的用户，让聊天体验更加流畅和真实。

客户端接收消息的“receiveMessage”事件

在main.js文件中，我们定义了一个socket对象，它正在监听一个名为'receiveMessage'的事件。每当服务器广播新的消息时，这个事件就会被触发。我们的代码就像一双灵敏的耳朵，时刻准备捕捉这些消息。

当'receiveMessage'事件被触发时，socket会接收到一组数据，这组数据被封装在一个回调函数中。这个函数就是我们用来处理接收到的消息的地方。

我们的消息处理逻辑被封装在一个名为showMessage的函数中。这个函数会判断接收到的消息是否由自己发出。如果是，消息会以特定的样式显示，以突出显示自己发送的消息。如果不是，消息则会以另一种样式显示，以区分其他用户的消息。

现在，我们的聊天室已经基本搭建完成，让我们来看看效果如何。想象一下三个浏览器窗口，分别代表着我们的三个用户：老大、老二、老三。他们同时在线，互相交流，发送的消息如流水般在聊天室中流淌。比如，老大发送了一条“大噶好～，我是渣渣辉！”的消息，这条消息会立刻在老二和老三的聊天窗口中显示出来。

为了实现这一功能，我们使用了Cambrian框架来渲染页面。只需调用`cambrian.render('body')`，我们的聊天室界面就会呈现在用户面前。源码地址也是通过这个框架来管理和展示的。用户可以在源码地址中找到我们的代码，进行学习和交流。

我们的聊天室功能丰富，用户体验良好。无论是自己发送的消息，还是他人发送的消息，都能以清晰的样式展示出来。而且，我们的代码易于理解和修改，为开发者提供了极大的便利。