蓝易云服务器 - 如何在前端实现WebSocket发送和接收TCP消息（多线程模式)

原创

蓝易云服务器 2024-12-28 00:05:46 ©著作权

文章标签 服务器发送消息 TCP 文章分类 代码人生 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者蓝易云服务器的原创作品，请联系作者获取转载授权，否则将追究法律责任

要在前端实现WebSocket发送和接收TCP消息，你可以使用JavaScript的WebSocket API。WebSocket允许在浏览器和服务器之间建立持久的双向通信连接，这可以用于发送和接收消息。

蓝易云服务器 - 如何在前端实现WebSocket发送和接收TCP消息（多线程模式)_服务器

以下是一个简单的示例，演示如何在前端使用WebSocket发送和接收TCP消息：

// 创建WebSocket连接
const socket = new WebSocket("ws://your_server_address");

// 监听连接打开事件
socket.addEventListener("open", (event) => {
    console.log("WebSocket连接已打开");
  
    // 发送消息给服务器
    socket.send("Hello, Server!");
});

// 监听接收消息事件
socket.addEventListener("message", (event) => {
    const receivedMessage = event.data;
    console.log("从服务器接收到消息: " + receivedMessage);

    // 处理接收到的消息，例如更新页面内容
});

// 监听连接关闭事件
socket.addEventListener("close", (event) => {
    if (event.wasClean) {
        console.log(`WebSocket连接已关闭，状态码: ${event.code}, 原因: ${event.reason}`);
    } else {
        console.error("WebSocket连接意外关闭");
    }
});

// 监听连接错误事件
socket.addEventListener("error", (error) => {
    console.error("WebSocket连接错误: " + error.message);
});

在这个示例中，你需要将 ws://your_server_address替换为你的服务器地址，确保服务器支持WebSocket。