Nodejs websocket.io打造即时聊天程序

Node.js WebSocket.io 打造即时聊天程序

受网上一些简单聊天程序的启发，我决定自己动手写一个基于 Node.js 和 WebSocket.io 的即时聊天程序。这个聊天程序不仅支持文字消息，还实现了图片和表情功能。以下是详细的实现过程。

在线演示

你可以通过以下链接访问在线演示：

• 在线演示

实现过程

为了实现这个聊天程序，我们需要以下几个步骤：

1. 安装必要的依赖
2. 创建 WebSocket 服务器
3. 处理客户端连接
4. 处理消息传递
5. 添加图片和表情功能

安装必要的依赖

首先，我们需要安装 express 和 socket.io 这两个库来搭建服务器和处理 WebSocket 连接。

npm install express socket.io

创建 WebSocket 服务器

接下来，我们创建一个基本的 Express 服务器，并使用 Socket.io 来处理 WebSocket 连接。

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('A user connected: ' + socket.id);

    socket.on('disconnect', () => {
        console.log('User disconnected: ' + socket.id);
    });

    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

处理客户端连接

在客户端，我们需要使用 JavaScript 和 HTML 来创建一个简单的界面，并通过 WebSocket 连接到服务器。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HiChat</title>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        const form = document.querySelector('form');
        const input = document.getElementById('m');
        const messages = document.getElementById('messages');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', (msg) => {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>
</body>
</html>

添加图片和表情功能

为了支持图片和表情功能，我们可以扩展消息格式，并在前端进行相应的处理。

// server.js
socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
});

<!-- index.html -->
<form action="">
    <input id="m" autocomplete="off" />
    <button>Send</button>
    <input type="file" id="image" />
</form>

<script>
    // 处理图片上传
    document.getElementById('image').addEventListener('change', (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = (event) => {
            socket.emit('chat image', event.target.result);
        };
        reader.readAsDataURL(file);
    });

    // 处理表情
    document.getElementById('m').addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && e.shiftKey) {
            const emoji = document.getElementById('emoji').value;
            socket.emit('chat message', emoji);
        }
    });
</script>

通过以上步骤，我们可以实现一个基本的即时聊天程序，支持文字、图片和表情功能。希望这个示例对你有所帮助！如果你对更多细节感兴趣，可以查看我的博客文章：

• 详细实现过程