JavaScript 中的多線程通信

本文參考《Html 5 與 CSS 3 權威指南》

在Html 5誕生之後,我們可以使用javascript來實現多線程處理。H5 新增瞭一個web workers api,使用這個API,用戶可以很容易地創建在後臺運行的線程,H5 中被稱為workder ,如果將費時比傢長的操作放到後臺去執行,對用戶在界面的操作就完全沒有影響瞭。

創建後臺線程也十分的簡單,隻要在workder類的構造器中將需要執行的腳本文件的url作為參數,然後創建worker對象就可以瞭,如下所示

     var worker = new Worker("test.js")

在創建瞭worker對象之後,我們可以通過worker的postMessage()來向後臺線程發送消息。可以使用onmessage(msg) 來獲取消息。

下面我們來看一下多線程之間通信,在這裡實現多個worker之間通信實際上需要借助主線程,子線程A將消息發送給主線程,然後主線程將A線程發送的消息發送給B.下面是實現的代碼。


	
		
		
	
	
		<script>
			var sendWorker = new Worker("js/send.js");     //消息發送線程
			var receiveWorker = new Worker("js/receive.js");  //消息接送線程
			sendWorker.onmessage = function(msg)
			{
				receiveWorker.postMessage(msg.data); //接收到消息之後馬上發給接受線程
			}
			
			function sendMessage()
			{
				sendWorker.postMessage("");  //啟動消息發送線程發送消息。
			}
		</script>
		
		
	

send.js

onmessage = function(msg)
{
	postMessage("這個是子線程A 發送的消息");// 線程A 發出消息	
}

receive.js

onmessage = function(msg)
{
	//alert(msg.data); //這句話會報錯,因為當前這個方法是在子線程中執行,所以不能使用alert,因為這個會影響UI
	console.log(msg.data);  // 接受線程在控制臺輸出
}

最後說一下workder之中可用的變量,函數,類

self :該關鍵字用來本線程的范圍。

postMessage(msg) 向創建線程的源窗口發送消息。

onmessage 獲取接受消息的事件 句柄。

importScripts(urls) 導入其他的javascript腳本。

使用navigator對象。

使用sessionStorage/localStorage

使用ajax請求

嵌套線程

close結束本線程。

setTimeout/setInterval

eval().isNaN()等,可以使用所有javascript核心函數。

object

可以使用WebSockets api.

文章內容如有錯誤,請批評指正。

發佈留言