主线程，worker线程，html界面与服务器，通过websocket发送指令和接收服务器的回应，并将服务器的回复打印在html界面上

最新推荐文章于 2024-10-17 00:04:56 发布

哈哈要多学亿点点

最新推荐文章于 2024-10-17 00:04:56 发布

阅读量242

点赞数 3

文章标签： html 服务器 websocket

本文链接：https://blog.csdn.net/m0_60329232/article/details/139355285

版权

步骤 1: 创建HTML界面

首先，创建一个简单的HTML页面，包括一个按钮用于触发WebSocket消息发送，以及一个区域用来显示服务器的响应。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Example</title>
<script src="main.js"></script> <!-- 主线程的JS脚本 -->
</head>
<body>
<button onclick="sendMessage()">发送命令</button>
<div id="serverResponse">服务器响应将会显示在这里</div>
</body>
</html>

步骤 2: 主线程的JavaScript (main.js)

在main.js中，我们创建WebSocket连接，初始化Worker线程，并定义消息处理逻辑。

// main.js
let socket;
let worker = new Worker('worker.js'); // 引入Worker脚本

// 初始化WebSocket连接
function initWebSocket() {
    socket = new WebSocket('ws://your-server-url'); // 替换为你的WebSocket服务器地址
    socket.addEventListener('open', () => {
        console.log('WebSocket 连接成功');
    });
    socket.addEventListener('message', (event) => {
        // 直接由Worker处理消息，这里不直接操作UI，因为我们将消息转发给Worker
        worker.postMessage(event.data);
    });
}

// 发送命令给服务器
function sendMessage() {
    if(socket.readyState === WebSocket.OPEN) {
        socket.send('{"action":"getStatus"}'); // 发送获取状态的命令
    } else {
        console.error('WebSocket 还未准备好');
    }
}

// 设置Worker的消息监听
worker.addEventListener('message', (e) => {
    document.getElementById('serverResponse').innerText = e.data; // 将Worker传来的内容显示在界面上
});

initWebSocket(); // 页面加载时初始化WebSocket

步骤 3: Worker脚本 (worker.js)

Worker脚本将负责接收主线程传递过来的WebSocket消息，并直接将这些消息再转发回主线程。

// worker.js
self.addEventListener('message', (e) => {
    // 直接将接收到的消息转发回主线程，不做额外处理
    self.postMessage(e.data);
});

哈哈要多学亿点点

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫