基于观察者模式的在线聊天网页系统设计

一、系统概述

在线聊天网页系统旨在为用户提供一个实时交流的平台。利用观察者模式，当有新消息发送时，系统能够及时通知所有在线用户，实现消息的实时更新。

二、技术选型

前端：使用 HTML 构建页面结构，CSS 进行样式设计，JavaScript 实现交互逻辑。
后端：以 Node.js 和 Express 框架搭建服务器，负责处理用户连接、消息存储与转发。

三、实现步骤

（一）前端部分

HTML 页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线聊天系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="chat-container">
        <div id="messages"></div>
        <form id="message-form">
            <input type="text" id="message-input" placeholder="输入消息">
            <button type="submit">发送</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

#chat-container {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 10px;
}

#messages {
    height: 300px;
    border: 1px solid #ddd;
    overflow-y: scroll;
    margin-bottom: 10px;
    padding: 5px;
}

#message-form {
    display: flex;
}

#message-input {
    flex: 1;
    padding: 5px;
    margin-right: 5px;
}

button {
    padding: 5px 10px;
}

JavaScript 部分

const socket = io();

const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const messagesDiv = document.getElementById('messages');

messageForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = messageInput.value;
    if (message) {
        socket.emit('send message', message);
        messageInput.value = '';
    }
});

socket.on('receive message', (message) => {
    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    messagesDiv.appendChild(messageElement);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
});

（二）后端部分

Node.js + Express 搭建服务器

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.use(express.static('public'));

let messages = [];

io.on('connection', (socket) => {
    socket.emit('previous messages', messages);

    socket.on('send message', (message) => {
        messages.push(message);
        io.emit('receive message', message);
    });
});

const port = 3000;
server.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

四、效果预览

本作品采用知识共享署名 4.0 国际许可协议进行许可