WebSocket的基本使用

对卦卦上心

已于 2023-05-16 09:49:27 修改

阅读量172

点赞数 1

文章标签： websocket javascript 网络协议

于 2023-05-16 09:41:54 首次发布

本文链接：https://blog.csdn.net/liu0218/article/details/130698747

版权

WebSocket的基本使用.md

在前端使用 WebSocket 实现聊天功能是一种常见且强大的方法。WebSocket 是一种提供双向通信的协议，它可以在客户端和服务器之间建立持久连接，允许实时的数据传输。

下面是一个简单的示例，演示如何在前端使用 WebSocket 实现聊天功能。

HTML 部分：

htmlCopy code<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
</head>
<body>
    <div id="chat-output"></div>
    <input type="text" id="chat-input" placeholder="输入消息">
    <button id="chat-send">发送</button>

    <script src="websocket.js"></script>
</body>
</html>

JavaScript 部分（websocket.js）：

javascriptCopy code// 创建 WebSocket 连接
const socket = new WebSocket('ws://your-websocket-server-url');

// 当连接建立时触发
socket.onopen = function() {
    console.log('WebSocket 连接已建立');
    startHeartbeat()   //启动心跳事件
};

// 当接收到消息时触发
socket.onmessage = function(event) {
    const message = event.data;
    // 处理接收到的消息，将其显示在聊天界面上
    displayMessage(message);
};

// 当连接关闭时触发
socket.onclose = function() {
    console.log('WebSocket 连接已关闭');
};

// 当发生错误时触发
socket.onerror = function(error) {
    console.error('WebSocket 错误:', error);
};

// 发送消息
function sendMessage(message) {
    socket.send(message);
}

// 显示消息
function displayMessage(message) {
    const chatOutput = document.getElementById('chat-output');
    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    chatOutput.appendChild(messageElement);
}

// 启动心跳事件
function startHeartbeat() {
    // 发送心跳消息
    function sendHeartbeat() {
        socket.send('heartbeat');
    }

    // 每隔一段时间发送心跳消息
    const heartbeatInterval = 3000; // 3秒
    const heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval);

    // 监听关闭事件，清除定时器
    socket.onclose = function() {
        console.log('WebSocket 连接已关闭');
        clearInterval(heartbeatTimer);
    };
}


// 监听发送按钮点击事件
const sendButton = document.getElementById('chat-send');
sendButton.addEventListener('click', function() {
    const input = document.getElementById('chat-input');
    const message = input.value;
    sendMessage(message);
    input.value = '';
});

在上面的示例中，你需要将 'ws://your-websocket-server-url' 替换为你实际的 WebSocket 服务器 URL。WebSocket 服务器可以使用诸如 Node.js 的库（如 ws）或其他框架来实现。

通过这个示例，当用户在输入框中输入消息并点击发送按钮时，消息会通过 WebSocket 连接发送到服务器。服务器处理消息后，将其广播给所有连接的客户端，然后客户端通过 displayMessage 函数将消息显示在聊天界面上。

请注意，上述示例仅为演示目的，实际应用中还需要考虑安全性、消息格式、用户认证等方面的问题。