使用 Express.js 构建一个简单的即时聊天应用-JavaScript中文网-JavaScript教程资源分享门户

前言

随着移动互联网的不断发展，即时通讯已经成为人们生活和工作中必不可少的一部分。在现代化的互联网应用中，实现即时通讯系统往往需要耗费大量的时间和精力，但是如果我们采用一些现成的框架和工具，就能够更加高效地完成这项任务。在本文中，我们将用 Express.js 框架和 Socket.io 库来构建一个简单的即时聊天应用，从而帮助读者更好地理解前端技术的原理和应用。

技术概述

在开始编写代码之前，我们需要了解一些基础的技术概念和框架。以下是一些必要的技术要点：

Express.js：Express.js 是一个运行在 Node.js 环境下的 Web 应用框架，它提供了各种功能强大的 API 来处理 HTTP 请求和响应。使用 Express.js 可以帮助我们快速地构建基于 Web 的应用程序，同时也能够很好地支持实现即时聊天系统所需的全部功能。
Socket.io：Socket.io 是一个流行的 JavaScript 库，它提供了简单易用的 WebSocket API，用于实现基于 Web 的即时通讯服务。我们使用 Socket.io 库可以轻松地实现实时聊天和消息传递，该库既支持客户端也支持服务器端。
HTML / CSS / JavaScript：HTML 是用于描述 Web 页面内容的标记语言，CSS 用于定义页面的样式和布局，Javascript 则用于实现网页中的动态效果和交互行为。本文构建的即时聊天应用主要采用 HTML / CSS / JavaScript 来实现前端代码的交互和渲染。

实现步骤

步骤一：安装 Express 和 Socket.io

要开始编写即时聊天应用程序，我们需要先安装最新的 Node.js，并在本地计算机上配置 Node.js 环境。然后，我们就可以用 npm 包管理器来安装 Express 和 Socket.io 框架了。可以使用以下命令完成安装：

npm install --save express socket.io

步骤二：创建 Express 应用程序

如下所示，我们可以创建一个 Express.js 应用程序，并将其与本地的端口连接起来。通过使用 app.get() 方法，我们可以设置并响应根路由上的 GET 请求，将应用程序的主页重定向至聊天系统的入口页面：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.redirect('/chat.html');
});

http.listen(3000, () => {
  console.log('server listening on *:3000');
});

步骤三：准备前端 HTML 页面

作为前端代码中的入口页面，chat.html 页面将被用于处理用户给定聊天室的名称，并配置表单输入和消息输出区域。以下是聊天室页面的 HTML 页面示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Express Chat</title>
</head>
<body>
  <form id="chat-form">
    <input id="chat-room" type="text" placeholder="请输入聊天室名称" required />
    <input type="submit" value="进入" />
  </form>
  <ul id="chat-list"></ul>
  <form id="message-form">
    <input id="chat-message" type="text" placeholder="请输入你要发的消息"/>
    <input type="submit" value="发送" />
  </form>
  <script src="https://cdn.socket.io/socket.io-3.1.3.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/client.js"></script>
</body>
</html>

步骤四：实现客户端 JS 代码

客户端代码最重要的是建立 WebSocket 和服务器的连接。待聊天室名称输入后，客户端 JS 代码向服务器发起一个 Socket 连接请求。并在成功连接后，监听任何针对该连接传入的消息。最后，在清除用户界面和显示最新消息之后，使用服务器的 emit 让消息显示在客户端上：

// javascriptcn.com 代码示例
const socket = io();
var room;

$('#chat-form').submit(function (e) {
  e.preventDefault();
  room = $('#chat-room').val();
  socket.emit('subscribe', room);
});

$('#message-form').submit(function (e) {
  e.preventDefault();
  const msg = $('#chat-message').val();
  socket.emit('new-msg', { room: room, message: msg });
  $('#chat-message').val('');
});

socket.on('new-msg', function (data) {
  $('#chat-list').append($('<li>').text(data.message));
});

步骤五：实现服务器端代码

在服务器端代码中，我们需要在 Socket 连接到服务器时，为该连接建立一个聊天室。在收到来自客户端的新消息时，将其广播到连接到该聊天室的所有客户端。以下是服务器端代码示例：

// javascriptcn.com 代码示例
io.on('connection', function (socket) {

  socket.on('subscribe', function (room) {
    socket.join(room);
  });

  socket.on('new-msg', function (data) {
    io.to(data.room).emit('new-msg', data);
  });

});

总结

到这里，我们就成功地使用 Express.js 和 Socket.io 库来构建了一个简单的即时聊天应用。通过这个例子，读者可以更好地理解前端技术的原理和应用，同时也可以更加深入地学习 Node.js 框架及其周边技术。本文代码示例仅仅是一个基础入门的版本，读者可以在其基础上进行扩展和优化，如增加用户身份验证、支持多房间、历史消息管理等。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654fef137d4982a6eb8e0d15