首页 > 其他分享 >需要在本地实现一个聊天室,多个tab页相互通信,不能用websocket,你会怎么做?

需要在本地实现一个聊天室,多个tab页相互通信,不能用websocket,你会怎么做?

时间:2024-02-29 13:13:07浏览次数:26  
标签:聊天室 websocket 标签 通信 API tab SharedWorker 浏览器

可以考虑使用以下方法:

  1. 使用LocalStorage:这个存储API可在浏览器的不同标签页之间共享数据。当一个标签页发送消息时,将消息存储在LocalStorage中。其他标签页可以监听该存储区的变化,并读取最新的消息内容来实现通信效果。
    // 监听变化 2window.addEventListener("storage", (e) => {
    // todo ...
    });

     

  1. 使用Broadcast Channel API:Broadcast Channel API 可以在浏览器的不同上下文(包括不同的标签页)之间进行双向通信。当一个标签页发送消息到广播频道时,其他标签页可以通过监听相同的广播频道来接收和响应消息。

  2. 使用SharedWorker:SharedWorker 是一种在多个浏览器上下文之间共享脚本执行的机制,它可以在不同的标签页之间进行通信。可以创建一个SharedWorker,然后在各个标签页中连接到该SharedWorker,使它们能够共享数据和通信。

以上方法都可以实现在本地多个标签页之间进行通信,但需要根据具体需求和项目情况选择适合的解决方案。需要注意的是,这些方法只适用于本地通信,无法实现跨网络的实时通信效果,若需要实现更复杂的聊天室功能,WebSocket仍是更常用的选择。

标签:聊天室,websocket,标签,通信,API,tab,SharedWorker,浏览器
From: https://www.cnblogs.com/yaotuo/p/18043101

相关文章

  • 超简单stable_diffusion + novelai一键部署教程
    视频教程地址:超简单stable_diffusion+novelai一键部署教程个人的启动命令:sudodockerrun-it--rm-eNVIDIA_DISABLE_REQUIRE=1-eNVIDIA_DRIVER_CAPABILITIES=all-v/home/devil/stable_diffusion/:/home/user/stable-diffusion-webui/models/Stable-diffusion-p786......
  • STL-unordered_hashtable模拟实现
    #pragmaonce#include<vector>#include<string>#include<iostream>usingstd::cout;usingstd::endl;usingstd::pair;usingstd::make_pair;namespaceHashBucket{template<classT>structHashNode{HashNode......
  • Table Compression(思维)
    TableCompression(思维)题目链接Problem-C-Codeforces题目简述给定一N*M的表格a,让你对其进行压缩,使得:每一行与每一列相对大小不变,即若\(a_{i,j}>a_{i,k}\),则压缩后的\(a'_{i,j}>a'_{i,k}\),对于小于及等于的情况和同列不同行的情况同理。压缩后表格中的最大值尽量小。......
  • 修复sqlite3数据库 database disk image is malformed
    databasediskimageismalformed错误sqlite是一个文本型数据库,其内部虽然做了异常处理,且官网上也说一般的异常不会引起数据库文件损坏,但是官方还是给出了有可能导致数据库文件损坏的情况。以下内容来自官网:SQLite经过非常仔细的测试,以帮助确保它尽可能没有错误。对每个SQ......
  • Oracle设置日志参数-ALTER DATABASE ADD SUPPLEMENTAL LOG DATA;
    要实现两个数据库之间的实时同步,需要给Oracle设置参数ALTERDATABASEADDSUPPLEMENTALLOGDATA;--执行了12小时,等待数据库中的其它事务都提交以后才执行完成ALTERDATABASEADDSUPPLEMENTALLOGDATA(PRIMARYKEY)COLUMNS;ALTERDATABASEADDSUPPLEMENTALLOGDATA(......
  • 打包app端 登录页【非tabBar页面】底部会显示导航栏的解决办法
    如题,uniapp项目打包app后,登录页底部会显示导航栏的解决办法 首先直接在pages.Json中的对应页面配置中设置"navigationBarHidden":true这个方法是无效的"style":{       "navigationBarHidden":true   }但是可以通过js方式来控制页脚tabBar的隐藏与否:1、首......
  • el-table分页时实现切换分页多选选中效果并且编辑回显默认选中
    <el-tableref="table":data="tableData"borderheight="100%":row-key="getRowKeys"@selection-change="handleSelectionChange"></el-table>关键代码:1::row-key="getRowKeys&quo......
  • 关于Hash Table
    >>哈希表的应用哈希表是一种非常通用且灵活的数据结构,因此在计算机科学和软件工程中有许多应用。以下是哈希表的一些主要应用:1.字典和集合:哈希表常用于实现字典和集合等数据结构。在这些数据结构中,键-值对被存储在哈希表中,可以快速地进行查找、插入和删除操作。2.数据库索引:......
  • crontab工具
    介绍:1、crontab是Linux和类Unix操作系统下的一个任务调度工具,用于周期性地执行指定的任务或命令。2、crontab存储在文件中,该文件位于/var/spool/cron/目录中。3、除了管理员,可以将命令添加到crontab中,通常用户需要执行周期性操作时使用。基本语法minutehourday-of-monthm......
  • 自研Uncrop对比Stability AI效果
    https://stability.ai/news/clipdrop-launches-uncrop-the-ultimate-aspect-ratio-editor官网展示效果自研效果初始一次扩图二次扩图......