HTML5的多線程技術:Shared Worker的使用示例

Shared Worker 與普通的 Web Worker 類似,但不同之處在于它可以被多個瀏覽器窗口、標簽頁或者iframe共享,使得這些上下文之間能夠相互通信。下面是一個使用 Shared Worker 的完整示例。
共享Worker腳本(sharedWorker.js)
self.addEventListener('connect', function(event) {var port = event.ports[0];port.onmessage = function(e) {console.log('Received message:', e.data);if (e.data.type === 'broadcast') {port.postMessage({ type: 'broadcast', data: e.data.message, origin: e.origin });} else if (e.data.type === 'ping') {port.postMessage({ type: 'pong', data: 'Pong from Shared Worker!', origin: e.origin });}};port.start();port.postMessage({ type: 'ready', message: 'Shared Worker is ready!', origin: location.origin });
});
HTML 頁面1(page1.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Page 1</title>
</head>
<body><h2>Page 1</h2><button onclick="sendPing()">Ping Shared Worker</button><div id="response"></div><script>if (navigator.userAgent.indexOf("Trident") !== -1) {alert("Internet Explorer does not support Shared Workers.");} else {var worker = new SharedWorker('sharedWorker.js');worker.port.start();worker.port.onmessage = function(e) {if (e.data.type === 'ready') {document.getElementById('response').innerText = e.data.message;} else if (e.data.type === 'pong') {document.getElementById('response').innerText = 'Received: ' + e.data.data;} else if (e.data.type === 'broadcast') {document.getElementById('response').innerText += '\nBroadcast from ' + e.data.origin + ': ' + e.data.data;}};function sendPing() {worker.port.postMessage({ type: 'ping', message: 'Ping from Page 1' });}}</script>
</body>
</html>
HTML 頁面2(page2.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Page 2</title>
</head>
<body><h2>Page 2</h2><button onclick="broadcastMessage()">Broadcast Message</button><div id="response"></div><script>if (navigator.userAgent.indexOf("Trident") !== -1) {alert("Internet Explorer does not support Shared Workers.");} else {var worker = new SharedWorker('sharedWorker.js');worker.port.start();worker.port.onmessage = function(e) {if (e.data.type === 'ready') {document.getElementById('response').innerText = e.data.message;} else if (e.data.type === 'broadcast') {document.getElementById('response').innerText += '\nBroadcast from ' + e.data.origin + ': ' + e.data.data;}};function broadcastMessage() {var message = prompt("Enter a message to broadcast:");if (message) {worker.port.postMessage({ type: 'broadcast', message: message });}}}</script>
</body>
</html>

在這個例子中,sharedWorker.js作為一個Shared Worker,能夠接收來自多個頁面的消息,并根據消息類型執行不同的操作。page1.html可以向Shared Worker發送ping請求并接收pong響應,同時也能接收其他頁面通過Worker廣播的消息。page2.html則可以輸入消息并廣播給所有連接到該Shared Worker的頁面。這樣,多個頁面可以通過Shared Worker實現數據的共享和通信。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/37384.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/37384.shtml
英文地址,請注明出處:http://en.pswp.cn/web/37384.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

isupper()方法——判斷字符串是否全由大寫字母組成

自學python如何成為大佬(目錄):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 語法參考 isupper()方法用于判斷字符串中所有的字母是否都是大寫。isupper()方法的語法格式如下&#xff1a; str.isupper() 如果字符串中包含至少…

我是如何在bytemd中實現自定義目錄的

介紹 接著上文說完&#xff0c;實現了在markdown編輯器中插入視頻的能力&#xff0c;接下來還需要繼續優化 markdown文檔的閱讀體驗&#xff0c;比如 再加個目錄 熟悉markdown語法的朋友可能會說&#xff0c;直接在編輯時添加 toc 標簽&#xff0c;可以在文章頂部自動生成目錄…

實驗三 時序邏輯電路實驗

仿真 鏈接&#xff1a;https://pan.baidu.com/s/1z9KFQANyNF5PvUPPYFQ9Ow 提取碼&#xff1a;e3md 一、實驗目的 1、通過實驗&#xff0c;理解觸發的概念&#xff0c;理解JK、D等常見觸發器的功能&#xff1b; 2、通過實驗&#xff0c;加深集成計數器功能的理解&#xff0c;掌…

?Ollama的本地安裝?

先來逛一下咱們的主角Ollama的官網地址&#xff1a; Ollama 大概長這個樣子&#x1f914; 因為本地系統的原因&#xff0c;文章只提供Widows的安裝方式&#xff0c;使用Linux和Mac的大佬&#xff0c;可以自行摸索&#x1f9d0; 下載完成后就是安裝了&#x1f355;&#xff0c…

一、Redis簡介

一、Redis介紹與一般應用 1.1 基本了解 Redis全稱Remote Dictionary Server(遠程字典服務)&#xff0c; 是一個開源的高性能鍵值存儲系統&#xff0c;通常用作數據庫、緩存和消息代理。使用ANSI C語言編寫遵守BSD協議&#xff0c;是一個高性能的Key-Value數據庫提供了豐富的數…

JVM性能監控與調優:生產環境的實踐指南

JVM性能監控與調優&#xff1a;生產環境的實踐指南 一、引言 在生產環境中&#xff0c;Java應用程序的性能監控和調優是確保系統穩定運行、提升用戶體驗的關鍵環節。JVM&#xff08;Java Virtual Machine&#xff09;作為Java應用程序的運行環境&#xff0c;其性能直接影響到…

Flink 本地任務添加配置參數

Flink 本地任務添加配置參數 配置一個Configuration&#xff0c;然后通過StreamExecutionEnvironment.getExecutionEnvironment(configuration)傳入。 例如&#xff1a; Configuration configuration new Configuration();configuration.set(RestartStrategyOptions.RESTART_…

蘋果筆記本能玩網頁游戲嗎 蘋果電腦玩steam游戲怎么樣 蘋果手機可以玩游戲嗎 mac電腦安裝windows

蘋果筆記本有著優雅的機身、強大的性能&#xff0c;每次更新迭代都備受用戶青睞。但是&#xff0c;當需要使用蘋果筆記本進行游戲時&#xff0c;很多人會有疑問&#xff1a;蘋果筆記本能玩網頁游戲嗎&#xff1f;蘋果筆記本適合打游戲嗎&#xff1f;本文將討論這兩個話題&#…

6-14題連接 - 高頻 SQL 50 題基礎版

目錄 1. 相關知識點2. 例子2.6. 使用唯一標識碼替換員工ID2.7- 產品銷售分析 I2.8 - 進店卻未進行過交易的顧客2.9 - 上升的溫度2.10 - 每臺機器的進程平均運行時間2.11- 員工獎金2.12-學生們參加各科測試的次數2.13-至少有5名直接下屬的經理2.14 - 確認率 1. 相關知識點 left …

JavaScript——屬性的檢測和枚舉

目錄 任務描述 相關知識 屬性的檢測 屬性的枚舉 編程要求 任務描述 本關任務&#xff1a;給定一個屬性的名字&#xff0c;請先判斷它屬于哪一個對象&#xff0c;然后返回該對象的所有自有屬性名連接成的字符串。 如&#xff1a;school對象有三個自有屬性name,location,s…

達夢數據庫系列—15. 表的備份和還原

目錄 1、表備份 2、表還原 1、表備份 表備份和表還原恢復&#xff0c;都必須在聯機狀態下進行。 與備份數據庫與表空間不同&#xff0c;不需要備份歸檔日志&#xff0c;不存在增量備份之說。 CREATE TABLE TAB_FOR_RES_02(C1 INT);CREATE INDEX I_TAB_FOR_RES_02 ON TAB_F…

樹狀數組——點修區查與區修點查

樹狀數組是一種代碼量小&#xff0c;維護區間的數據結構 他可以實現&#xff1a; 1.區間修改&#xff0c;單點查詢 2.單點修改&#xff0c;區間查詢 當然&#xff0c;二者不可兼得&#xff0c;大人全都要的話&#xff0c;請選擇線段樹 前置知識&#xff1a; lowbit(x)操作…

如何安裝和配置Monit

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到網站。 關于 Monit Monit 是一個有用的程序&#xff0c;可以自動監控和管理服務器程序&#xff0c;以確保它們不僅保持在線&#xff0c;而且文…

Java與前端框架集成開發指南

Java與前端框架集成開發指南 大家好&#xff0c;我是免費搭建查券返利機器人省錢賺傭金就用微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01; 引言 在當今互聯網應用開發中&#xff0c;Java作為一種強大的后端語言&#xff0…

程序人生 - (002)

作為一名程序員&#xff0c;在編程和軟件開發的過程中&#xff0c;通常會有一些深刻的感悟和體會。這些感悟不僅僅是關于技術的&#xff0c;也包括對工作的態度、職業的發展和人生的理解。 代碼即邏輯&#xff1a;編寫代碼不僅僅是使用編程語言&#xff0c;更重要的是用邏輯思維…

LDM論文解讀

論文名稱&#xff1a;High-Resolution Image Synthesis with Latent Diffusion Models 發表時間&#xff1a;CVPR2022 作者及組織&#xff1a;Robin Rombach, Andreas Blattmann, Dominik Lorenz,Patrick Esser和 Bjorn Ommer, 來自Ludwig Maximilian University of Munich &a…

獨一無二的設計模式——單例模式(Java實現)

1. 引言 親愛的讀者們&#xff0c;歡迎來到我們的設計模式專題&#xff0c;今天的講解的設計模式&#xff0c;還是單例模式哦&#xff01;上次講解的單例模式是基于Python實現&#xff08;獨一無二的設計模式——單例模式&#xff08;python實現&#xff09;&#xff09;的&am…

web全屏api,實現元素放大全屏,requestFullscreen,exitFullscreen

全屏api 主要方法 document.exitFullscreen(); 退出頁面全屏狀態&#xff0c;document是全局文檔對象 dom.requestFullscreen(); 使dom進入全屏狀態&#xff0c;異步&#xff0c;dom是一個dom元素 dom.onfullscreenchange&#xff08;&#xff09;; 全…

專題四:Spring源碼初始化環境與BeanFactory

上文我們通過new ClassPathXmlApplicationContext("applicationContext.xml");這段代碼看了下Spring是如何將Xml里面內容注入到Java對象中&#xff0c;并通過context.getBean("jmUser");方式獲得了一個對象實例&#xff0c;而避開使用new 來耦合。今天我們…

【TB作品】智能臺燈控制器,ATMEGA128單片機,Proteus仿真

題目 8 &#xff1a;智能臺燈控制器 基于單片機設計智能臺燈控制器&#xff0c;要求可以調節 LED 燈的亮度&#xff0c;實現定時開啟與關閉&#xff0c; 根據光照自動開啟與關閉功能。 具體要求如下&#xff1a; &#xff08;1&#xff09;通過 PWM 功能調節 LED 燈亮度&#x…