H5-WebWorkers API / 通信API-WebSocket-1.1_websocket importscripts-优快云博客

本文链接：https://blog.youkuaiyun.com/caishu1995/article/details/80683463

本文详细介绍了Web Workers的基础用法及共享Worker的概念，并探讨了WebSocket的基本语法与事件处理，为读者提供了深入理解这两个Web技术所需的实用信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web workers

在了解这个之前建议先去了解postMessage。

所有主流浏览器都支持，除了IE!（IE: 为什么又是我最特殊。我要去找爸爸抱抱T_T）

那我们来看看吧。

基础语法：

检查是否支持

if(typeof(Worker) !== "undefined"){} //ok的代码
else{}//不支持哦

创建对象

var worker = new Worker("demo.js"); //demo.js文件等会再说

终止对象

worker.terminate();//主代码中终止
worker.close();    //worker内部终止

导入脚本：

这里有个神奇的玩意，他居然会自己导入脚本，厉害了我的哥啊。

importScripts("");

共享worker：

这里居然还能有共享的workers

worker = new SharedWorker("");
worker.port;//为文档新建一个端口并分配port属性
worker.connect;//内部测试新连接
worker.start;//开始分配

具体样例：

那我们先看看demo.js的代码吧

var i=0;

//每0.5s发送一个数字
(timedCount(){
    postMessage(i++);
    setTimeout("timedCount()",500);
})();

那主文件的代码呢

var w;

//开始执行工作
function startWorker(){
    if(typeof(Worker)!=="undefined"){
        w=new Worker("demo.js");
        w.onmessage = function (event) {
            alert(event.data);
        };
    }else{ alert("Sorry"); }
}

//停止工作
function stopWorker(){
    w.terminate();
}

webSocket

在了解这个之前建议先去了解postMessage，语法类似。

基础语法：

var socket = new webSocket("ws://localhost:8089/server.php"); 
socket.addEventListener("message", received, false); //见下详解
socket.send(data);//发信息
socket.close();   //关闭连接

基础属性：

socket.url;
socket.protocol;//返回使用的子协议
socket.readyState;//返回连接状态 0未连接 1已打开 2在关闭 3已关闭
socket.bufferedAmount;//返回已请求但未发送的数据

事件：

open   //打开链接的事件
message//发消息的时候触发
error
close   //链接关闭时的事件