使用websocket制作一个简易的聊天系统

创建一个简易的聊天系统前端部分使用 WebSocket 主要包含以下几个步骤：

  1. 建立 WebSocket 连接
  2. 处理连接打开事件
  3. 发送消息
  4. 接收并显示消息
  5. 处理连接关闭和错误事件

以下是一个简易的 HTML 和 JavaScript 示例，展示了如何使用 WebSocket 实现聊天系统的前端部分：

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易聊天系统</title>
</head>
<body>
    <h1>简易 WebSocket 聊天系统</h1>
    <div id="messageArea" style="height: 200px; width: 300px; border: 1px solid black; overflow-y: scroll;"></div>
    <input type="text" id="messageInput" placeholder="输入消息...">
    <button onclick="sendMessage()">发送</button>
    <script src="chat.js"></script>
</body>
</html>

JavaScript (chat.js)

// WebSocket 服务器地址，请根据实际情况修改
const wsServer = 'ws://localhost:8080';
let websocket = new WebSocket(wsServer);

// 处理连接打开事件
websocket.onopen = function(event) {
    showMessage('连接已建立');
};

// 处理接收消息事件
websocket.onmessage = function(event) {
    showMessage('收到消息: ' + event.data);
};

// 处理连接关闭事件
websocket.onclose = function(event) {
    showMessage('连接已关闭');
};

// 处理错误事件
websocket.onerror = function(event) {
    showMessage('发生错误');
};

// 发送消息函数
function sendMessage() {
    let messageInput = document.getElementById('messageInput');
    let message = messageInput.value;
    if (message !== '') {
        websocket.send(message);
        messageInput.value = ''; // 清空输入框
    }
}

// 显示消息函数
function showMessage(message) {
    let messageArea = document.getElementById('messageArea');
    let messageElement = document.createElement('div');
    messageElement.textContent = message;
    messageArea.appendChild(messageElement);
    // 滚动到最底部显示最新消息
    messageArea.scrollTop = messageArea.scrollHeight;
}

这个示例中，我们创建了一个简单的 HTML 页面，包含一个文本输入框、一个发送按钮和一个用于显示消息的 div 元素。JavaScript 部分负责建立 WebSocket 连接、发送消息以及接收并显示来自服务器的消息。

请注意，你需要将 wsServer 变量的值修改为你的 WebSocket 服务器的实际地址。此外，这个示例仅包含了前端部分，你还需要一个后端服务器来处理 WebSocket 连接和消息传递。你可以使用 Node.js、Python、Java 等语言来搭建后端服务器。

posted @ 2024-12-31 09:47  王铁柱6  阅读(41)  评论(0)    收藏  举报