Socket.io 实时聊天

原创已于 2025-03-14 07:29:13 修改 · 662 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #websocket #实时聊天 #socket.io

于 2025-03-14 07:25:09 首次发布

前端专栏收录该内容

8 篇文章

订阅专栏

1. 简介

Socket.io 是一个基于 WebSocket 协议的库，能够为客户端和服务器之间提供双向、实时的通信功能，广泛应用于即时聊天、实时通知、多人在线游戏等应用中。

本文将介绍如何使用 Socket.io 实现一个简单的实时聊天应用，包含服务器端和客户端的实现。

2. Socket.io 工作原理

Socket.io 使用 WebSocket 实现客户端和服务器之间的持久连接，允许服务器和客户端实时、双向地传输数据。Socket.io 还可以在 WebSocket 不可用时自动回退到轮询或其他技术，确保应用的高可用性。

核心概念：

WebSocket 连接：服务器和客户端通过 WebSocket 协议建立持久连接。
事件驱动：通过监听和触发事件实现数据的传输。
双向通信：客户端和服务器之间可以相互发送数据。

3. 实现步骤

3.1 服务器端代码

首先，我们需要设置一个简单的 HTTP 服务器，然后将 Socket.io 集成到该服务器上。

代码：server.js

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);  // 创建 HTTP 服务器
const io = socketIo(server);  // 将 HTTP 服务器传递给 socket.io

// 监听客户端连接
io.on('connection', (socket) => {
    console.log('有一个客户端连接上了服务器');

    // 监听客户端发送的消息
    socket.on('sendMsg', (data) => {
        console.log('服务器接收到浏览器的消息', data);

        // 处理数据
        data.name = data.name.toUpperCase();

        // 广播消息到所有客户端
        io.emit('receiveMsg', data.name + '_' + data.date);
        console.log('服务器向浏览器发送消息', data.name + '_' + data.date);
    });
});

// 监听端口
const port = 4000;
server.listen(port, () => {
    console.log(`服务器启动在 http://localhost:${port}`);
});

代码解释：

创建 HTTP 服务器：首先使用 Express 创建 HTTP 服务器 server。
集成 Socket.io：通过 socketIo(server) 将 HTTP 服务器传入 Socket.io，创建一个 io 实例。
监听 connection 事件：当有客户端连接时，触发 connection 事件，传入的 socket 对象代表当前连接的客户端。
监听 sendMsg 事件：客户端发送的聊天消息通过 socket.on('sendMsg', callback) 接收，服务器处理数据后广播消息到所有连接的客户端。
广播消息：通过 io.emit() 向所有客户端广播处理后的消息。

3.2 客户端代码

客户端将通过 HTML 和 JavaScript 与服务器建立 WebSocket 连接，并实现消息的发送与接收。

代码：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.io 实时聊天</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <h1>实时聊天</h1>
    <input id="name" placeholder="请输入名字" />
    <input id="message" placeholder="请输入消息" />
    <button id="sendBtn">发送</button>
    <ul id="messages"></ul>

    <script>
        const socket = io();  // 建立与服务器的 WebSocket 连接

        // 监听服务器广播的消息
        socket.on('receiveMsg', function (data) {
            const msgElement = document.createElement('li');
            msgElement.textContent = data;
            document.getElementById('messages').appendChild(msgElement);
        });

        // 发送消息到服务器
        document.getElementById('sendBtn').onclick = function () {
            const name = document.getElementById('name').value;
            const message = document.getElementById('message').value;
            const date = new Date().toLocaleString();
            socket.emit('sendMsg', { name, message, date });  // 向服务器发送消息
        };
    </script>
</body>
</html>

代码解释：

加载 Socket.io 客户端库：通过 <script src="/socket.io/socket.io.js"></script> 引入客户端库。
连接服务器：使用 const socket = io(); 创建 WebSocket 连接，自动连接到当前服务器。
监听 receiveMsg 事件：当服务器发送消息时，客户端会接收到 receiveMsg 事件，并将消息显示在网页上。
发送 sendMsg 事件：当用户点击 "发送" 按钮时，客户端通过 socket.emit('sendMsg', { name, message, date }) 向服务器发送消息。