后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Socket.io 和 Node.js 构建实时聊天应用程序（带自动测试）
在本教程中，我们将学习如何使用 Socket.IO 和 Node.js 创建一个简单的聊天应用程序。我们将搭建一个基本的 Node.js 应用并安装必要的依赖项。我们将创建一个基本的聊天界面，并添加一个简单的功能，让用户能够借助 Socket.IO 连接轻松地发送和接收消息。Socket.io 是一个广泛使用的库，用于实现 Web 客户端和服务器之间的实时通信。最后，我们将使用 Mocha 框架编写一个简单的测试，并通过 Harness CI 实现自动化。
先决条件
- Node.js已安装
- Npm安装
- 免费的Harness CI帐户来实现自动化测试
教程
-
在你的机器上安装 Node.js：你可以从官方网站下载并安装最新版本的 Node.js：https://nodejs.org/
-
创建一个新的 Node.js 项目：打开终端窗口并为您的项目创建一个新目录。导航到新目录并运行以下命令为您的项目创建一个新的 package.json 文件：
npm init -y
- 安装 Socket.io：运行以下命令在您的项目中安装 Socket.io：
npm install socket.io
- 创建一个新的 Node.js 服务器：
server.js在你的项目目录中创建一个名为的新文件并添加以下代码：
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.use(express.static(__dirname + '/public'));
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('disconnect', () => {
console.log('A user disconnected');
});
socket.on('message', (message) => {
console.log('Received message:', message);
io.emit('message', message);
});
});
http.listen(3001, () => {
console.log('Server started on port 3001');
});
这段代码为 message 事件添加了一个监听器，该事件在用户点击发送按钮时由客户端发出。服务器将消息记录到控制台，然后使用 io.emit() 方法向所有连接的客户端发出 message 事件。
- 创建新的 HTML 文件：
index.html在 public 目录中创建一个名为 的新文件，并添加以下代码。它会向 index.html 文件添加一个输入字段和一个按钮，以允许用户向服务器发送消息。以下是示例：
<!DOCTYPE html>
<html>
<head>
<title>Socket.io Tutorial</title>
</head>
<body>
<h1>Socket.io Tutorial</h1>
<div id="messages"></div>
<input id="message-input" type="text" placeholder="Type your message here">
<button id="send-button">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
socket.on('connect', () => {
console.log('Connected to server');
});
socket.on('disconnect', () => {
console.log('Disconnected from server');
});
const messages = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', () => {
const message = messageInput.value;
socket.emit('message', message);
messageInput.value = '';
});
socket.on('message', (message) => {
const messageElement = document.createElement('div');
messageElement.innerText = message;
messages.appendChild(messageElement);
});
</script>
</body>
</html>
- 启动服务器：在终端中运行以下命令来启动服务器：
node server.js
您应该在下面的终端上看到输出，Server started on port 3001
当您在本地打开 3001 时，您应该会看到您的聊天应用程序正在运行。
这应该是您现在的应用程序文件夹结构。
socketio-nodejs-tutorial/
|- node_modules/
|- public/
| |- index.html
|- server.js
|- package.json
向聊天应用程序添加测试用例
由于 Socket.io 是一个实时框架，为其编写自动化测试可能有点困难。不过，我们可以编写一个简单的测试来验证客户端和服务器是否可以相互通信并发送/接收消息。
通过运行以下命令安装 mocha 测试框架和 chai 断言库：
npm install mocha chai --save-dev
[注意：在应用程序的根目录中运行上述命令]
使用以下代码创建一个名为 的新文件夹test并在其中添加一个名为 的文件。test.js
const assert = require('chai').assert;
const io = require('socket.io-client');
const serverUrl = 'http://localhost:3000';
describe('Socket.io test', function() {
let client1, client2;
before(function(done) {
// Connect to the server
client1 = io.connect(serverUrl);
client2 = io.connect(serverUrl);
done();
});
after(function(done) {
// Disconnect from the server
client1.disconnect();
client2.disconnect();
done();
});
it('Should be able to send and receive messages', function(done) {
client1.emit('message', 'Hello, world!');
client2.on('message', function(msg) {
assert.equal(msg, 'Hello, world!');
done();
});
});
});
现在确保您的应用程序正在运行。
在另一个终端打开应用程序并运行以下命令来测试该应用程序。
npm test
您应该会看到测试成功通过的消息。
将您的应用程序代码推送到源代码控制管理系统，例如 GitHub。
我的应用程序代码在这里 - chat-app-tutorial
您可以 fork 它，也可以使用您自己的代码（您推送到 GitHub 的那个）来通过 CI 工具设置自动化测试。我们将扩展本教程，向您展示如何实现自动化测试。
使用 CI 工具自动化测试
在这里，我们将使用最快的 CI 工具 Harness。
登录到您的免费 Harness CI 模块。
开始创建您的第一个管道
使用您的 GitHub 帐户进行身份验证，因为您的应用程序代码存在于那里。
选择您的应用程序存储库。
接下来开始配置管道。
从列表中选择 Node.js，因为我们的应用程序是用 Node.js 编写的。然后，您将看到 Node.js 应用程序的默认 yaml 配置。
继续并点击“创建管道”按钮。您将看到管道仪表板。
单击“构建节点应用程序”阶段，您应该会看到默认添加的预配置运行步骤。
单击正在执行的“构建节点应用程序”步骤，您将看到默认配置。
我们希望在测试应用程序之前先运行它。如何让应用程序运行起来？我们将添加一个后台步骤来运行服务器。
使用下面显示的命令配置后台步骤。
npm install
npm install express --save-dev
node server.js
同一步骤的截图如下所示
应用更改并添加另一个步骤来测试应用程序。
从步骤库中选择运行步骤。
将以下命令添加到运行步骤。
npm install
npm test
您可以看到添加了命令的运行步骤的屏幕截图。
应用更改并保存管道。
此时，您的管道应该是这样的。
保存所有内容并运行管道。
您应该会看到管道执行成功并且测试通过。
您已默认启用拉动和推动触发器。
因此，当任何开发人员将代码推送到你的主分支时，管道就会被触发并运行测试。这样，测试就可以轻松实现自动化。
如果你想从头学习 CI/CD，我还有另一个你可能会喜欢的教程。可以看看。
