使用 Socket.io 的聊天应用程序

您是否曾经想过创建一个实时聊天应用程序，或者只是好奇其内部操作是怎样的？

今天我们将讨论如何使用 NodeJS、ExpressJs 和 Socket.io 与客户端、浏览器和服务器进行通信

首先，我们来定义一下什么是 Web Socket。Web
Socket 是一种计算机通信协议，它通过单个 TCP 连接提供全双工通信通道。
由于 Web Socket 始终处于打开状态，因此这种通信是双向的，并且允许实时数据流（传输）。

先决条件

✔ NodeJS 基础知识
✔ JavaScript 基础知识
✔ 对 NPM 有一定的了解

入门

待办事项

启动我们的项目
安装软件包
设置 Express 应用并监听服务器
创建静态中间件
在服务器端（index.js）和前端（index.html）使用socket.io
查询文档对象模型 (DOM)
广播消息

按照说明启动项目

Initiate your project using npm init and pass the '-y' flag to default all questions. This creates your package.json file that tracks all the dependencies and list information about the project

Install dependencies: Express and Socket.io

Install Nodemon to automatically restart the server, save it as a Dev dependency by using the --save-dev flag

创建一个入口点，在本例中，我将使用 index.js。您可以随意在 package.json 上更改主入口文件。
接下来，让我们设置 Express 应用并创建一个 Express 应用实例。

让我们通过在终端上运行 Nodemon index 来测试一下这个应用程序。
如果你正确设置了应用程序，你将得到以下结果

[nodemon] starting `node index.js`
App is listening to server on port 3000

当你在浏览器上运行 localhost:3000 时，响应是

cannot GET /

。为了能够向浏览器提供 HTML、图像、CSS 等静态文件，请创建一个名为“public”的文件夹、一个 index.html 文件，并在 index.js 文件中写入中间件。

// Static files middleware
app.use(express.static('public'));

✍
注意：中间件是写在请求和响应之间的函数。Express 会自动查找公共文件夹（静态文件）并提供 index.html 文件。

为了演示，让我们充实 index.html 文件中的样板。

因此，当您刷新初始localhost:3000 时，它将在浏览器屏幕上显示主页

接下来是在我们的 index.js 中使用 socket.io，首先需要 socket 模块

const socket = require('socket.io');

然后设置 socket.io 并链接到 express 应用正在监听的服务器

const io = socket(server);

此时，服务器已打开并等待触发事件。

为了使 WebSocket 在特定客户端连接到服务器时监听事件，我们编写了下面的函数。

io.on('connection', (socket)=>{
console.log('Socket connected successfully')
);

让我们将socket.io加载到我们的前端以建立两端之间的通信。socket.io
cdn

从 socket.io CDN 复制上述链接，并将其作为脚本文件粘贴到公共文件夹内的 index.html 文件中。（以黄色突出显示）。

接下来，在 public 文件夹中创建一个 JavaScript 文件，用于在前端运行 socket.io 逻辑。我将其命名为 front_end_Chat.js，并在 index.html 中引用它。（红色部分已突出显示）

。

解释 ✍

当我们在浏览器中加载提供给我们的 index.html 时，浏览器会加载 socket.io CDN（上面以黄色突出显示），然后运行 front_end_Chat.js 文件。

接下来是在front_end_Chat.js文件里面与后端服务器建立连接，在两端之间创建一个Web套接字。

// Make connection front-end setup
const socket = io.connect('http://localhost:3000');

在这里，当我们在浏览器中加载 index.html 文件时，我们运行 socket.io 文件，进入 front_end_Chat.js，在上面刚刚编写的函数上建立连接，我们在 index.js 文件内的后端监听连接（参见下面的参考）并在刷新页面时在终端上记录消息“Socket 连接成功” 。

// Backend connection
io.on('connection', (socket) => {
console.log('Socket connected successfully')
});

每次刷新服务器或不同的计算机连接到同一 IP 地址时，我们都可以向控制台记录不同的套接字唯一 ID。在本例中，http://localhost:3000

// Backend connection
io.on('connection', (socket) => {
console.log('Socket connected successfully', socket.id)
});

至此，我们已经在前端和后端设置好了 socket.io。现在，让我们看看如何通过在前端设置的信息在两端之间传输数据，从而向不同的客户端（浏览器）发送消息。

在这里，我们在 index.html 文件中创建输入和按钮来存储和发送用户信息和消息。

    <div id="tiny-chat">
        <div id="tiny-window">
            <div id="output"></div>
            <div id="feedback"></div>
        </div>
        <input id="handle" type="text" placeholder="Handle" />
        <input id="message" type="text" placeholder="Message" />
        <button id="send">Send</button>
    </div>

此后，我们充实前端的 JavaScript，即 front_end_Chat.js，它与上面的输入和按钮交互，并通过 JavaScript 文件从客户端向服务器发送消息。

我使用 id 来设计聊天室。代码库可以在我的 GitHub 上找到。Github
链接

接下来要做的是在 front_end_Chat.js 中查询 DOM

// Query DOM
const message = document.getElementById('message'),
    handle = document.getElementById('handle'),
    btn = document.getElementById('send'),
    output = document.getElementById('output');

接下来的事情是当用户点击发送按钮时使用同一文件内的 Vanilla JavaScript 发出一条消息。

// Emit events
btn.addEventListener('click', function() {
    socket.emit('chat', {
        message: message.value,
        handle: handle.value
    });
    message.value = "";
});

解释 ✍

当我们点击发送按钮 (btn) 时，我们会监听 click 事件，然后触发一个回调函数，使用socket.emit函数发出一条消息。emit 函数接受两个参数（消息名称，我们称之为“聊天”）和 message（发送至服务器的数据）。

接下来我们需要在服务器（index.js）上通过监听消息来处理前端发来的消息。

const io = socket(server);
io.on('connection', (socket) => {

    console.log('made socket connection', socket.id);

    // Handle chat event
    socket.on('chat', function(data) {
        console.log(data);
        io.sockets.emit('chat', data);
    });

在前端，我们需要一种方法来处理socket.on 函数发出的数据并将其输出到 DOM。在 front_end_Chat.js 中，我们编写了下面的函数来监听事件。

// Listen for events
socket.on('chat', function(data) {
    feedback.innerHTML = '';
    output.innerHTML += '<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
});