js webworkers与websocket

最新推荐文章于 2024-08-29 17:54:59 发布

王shao

最新推荐文章于 2024-08-29 17:54:59 发布

阅读量772

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41028725/article/details/98457084

版权

1.webworkers

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>Document</title>
	</head>
	<body>
	    <!-- 
	        webworkers是H5提供的一个js多线程解决方案
	        我们可以将一些大计算量的代码交给webworker运行而不冻结用户界面
	        由于子线程完全受主线程控制，且不得操作DOM
	        所以并没有改变js单线程的本质
	     -->
	    <input type="text" placeholder="数值" id='number'>
	    <button onclick={calc()}>计算</button>
	    <script>
	        function fibonaci(n){
	            return n<=2?1:fibonaci(n-1)+fibonaci(n-2);
	        }
	
	        let input =document.getElementById('number');
	
	        function calc(){
	            let number = input.value;
	            // let result = fibonaci(number);
	            // alert(result);
	
	            // 创建一个worker对象
	            let worker = new Worker('./websocket.js');
	
	            // 向分线程发送数据
	            work.postMessage(number);
	
	            // 接受worker传过来的数据
	            worker.onmessage = (event)=>{
	                alert(event.data);
	            }
	        }
	    </script>
	</body>
	</html>

websocket.js

function fibonaci(n){
 return n<=2?1:fibonaci(n-1)+fibonaci(n-2);
}

// 获取主线程发送过来的数据
let onmessage = function(event){
    let number = event.data;
    let result = fibonaci(number);
    postMessage(result);
}

注意：webworker不能操作DOM，this也不是Window

2.websocket

var ws = new WebSocket("wss://127.0.0.1:8080");

ws.onopen = function(evt) {  //绑定连接事件
　　console.log("Connection open ..."); 
　　ws.send("发送的数据");
};

ws.onmessage = function(evt) {//绑定收到消息事件
　　console.log( "Received Message: " + evt.data);
};

ws.onclose = function(evt) { //绑定关闭或断开连接事件
　　console.log("Connection closed.");
};