精华内容
下载资源
问答
  • 其实要实现web通信很简单,github上有一叫做lsbridge的项目,使用其中的lsbridge.js即可以实现屏传输数据,而且很简单很方便。但是要求要在同一浏览器内这是发送数据的页面:test1function sendData() {ls...

    其实要实现web多屏通信很简单,github上有一个叫做lsbridge的项目,使用其中的lsbridge.js即可以实现多屏传输数据,而且很简单很方便。但是要求要在同一个浏览器内

    这是发送数据的页面:

    test1

    function sendData() {

    lsbridge.send('my-namespace', {message: 'Hello world!'}); //使用lsbridge.send()函数发送json

    //使用一个命名空间,这里是'my-namespace',发送一个json,这里是{message:'Hello world!'}

    }

    test

    这是接收数据的页面:

    test2

    lsbridge.subscribe('my-namespace', function(data) {//使用lsbridge.subscribe()函数接收数据 有回调函数function(data) data为接收到的数据

    //使用传过来的json做想做的事

    });

    以上就是lsbridge实现分屏传输数据,同时lsbridge.js写得也很简短,大约100多行代码,感兴趣可以看一下它的源码。

    装载自:https://blog..net/qq_35580883/article/details/78144739

    展开全文
  • 使用简单,功能灵活且强大,如果部署了 webSocket 服务器,可以实现很实时通信功能。 第一步,新建一文件夹 webSocket。 第二步,初始化 webSocket 文件夹, 使用 npm init 下载 package.json 文件。 第三步...


    1、缺点

    1、需要服务端的支持才能完成任务。如果 socket 数据量比较大,会严重消耗服务起得资源。
    2、必须要在服务端项目中写服务端监听程序才能使用。


    2、优点

    使用简单,功能灵活且强大,如果部署了 webSocket 服务器,可以实现很多实时通信功能。


    3、步骤

    第一步,新建一个文件夹 webSocket。
    第二步,初始化 webSocket 文件夹,使用 npm init 下载 package.json 文件。
    第三步,使用 npm install --save ws 安装模块。
    第四步,在 webSocket 文件夹里面创建三个文件,三个文件跟 package.json 文件同级,分别是: server.js / send.html / reception.html。


    4、服务器端 server.js 文件代码

    // 获得 WebSocketServer 类型
    let WebSocketServer = require('ws').Server;
    // 创建 WebSocketServer 对象实例,监听指定端口
    let wss = new WebSocketServer({ port: 3600 });
    // 创建保存所有已连接到服务器的客户端对象的数组
    let clients = [];
    
    // 为服务器添加 connection 事件监听,当有客户端连接到服务端时,立刻将客户端对象保存进数组中。
    wss.on('connection', function(client) {
    	console.log("一个客户端连接到服务器");
        if (clients.indexOf(client) === -1) {
    		clients.push(client);
            console.log("有" + clients.length + "个客户端在线");
            // 为每个 client 对象绑定 message 事件,
            // 当某个客户端发来消息时,自动触发
            client.on('message', function(msg) {
                // console.log("收到消息:" + msg);
                // 遍历 clients 数组中每个其他客户端对象,
                // 并发送消息给其他客户端
                for (let key of clients) {
                    if (key != client) {
                        key.send(msg);
                    }
                }
            });
        }
    }); 
    // 启动服务器的命令 node server.js
    

    5、客户端 send.html 文件代码

    <input type="text" id="msg">
    <button id="send">发送</button>
    
    // 建立到服务端 websocket 连接
    let ws = new WebSocket("ws://localhost:3600");
    send.onclick = function() {
    	if (msg.value.trim() !== "");
    	ws.send(msg.value.trim());
    };
    

    6、客户端 reception.html 文件代码

    <div>
    	<span>收到消息:</span>
    	<span id="recMsg"></span>
    </div>
    
    // 建立到服务端 websocket 连接
    let ws = new WebSocket("ws://localhost:3600");
    // 当连接被打开时,
    // 注册接收消息的处理函数
    ws.onopen = function(event) {
    	// 当有消息发过来时,
    	// 就将消息放到显示元素上
    	ws.onmessage = function(event) {
    		recMsg.innerHTML = event.data;
    	};
    };
    

    7、完整代码

    gitee(码云) - mj01分支 - webSocket 文件夹

    展开全文
  • localstorage 另一浏览上下文里被添加、修改或删除时,它都会触发一事件,我们通过监听事件,控制它的值来进行页面信息通信; 注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError...

    WebSocketSharedWorker
    也可以调用 localstoragecookies 等本地存储方式;

    WebSockets
    WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API,您可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。
    
    WebSocket
    WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。
    
    SharedWorker接口代表一种特定类型的worker,可以从几个浏览上下文中访问
    

    localstorage 另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信

    注意 quirks:Safari无痕模式下设置 localstorge 值时会抛出
    QuotaExceededError 的异常;

    展开全文
  • Electron中页面之间通信

    千次阅读 2020-12-20 04:30:20
    Electron的运行环境为Chromium + Node.js, 而Chromium采用的是进程机制,也就是说每个页面都是一个独立的进程(渲染进程),因此页面之间是没有直接关系的,要想进行通信,需要借助主进程作为桥梁。所以我们首先先来...

    Electron的运行环境为Chromium + Node.js, 而Chromium采用的是多进程机制,

    也就是说每个页面都是一个独立的进程(渲染进程),因此页面之间是没有直接关系的,

    要想进行通信,需要借助主进程作为桥梁。

    所以我们首先先来学习主进程和渲染进程怎么通信:

    1. 渲染进程---->主进程

    发送端:

    ipcRenderer.send(channel, data)

    接收端:

    ipcMain.on(channel, listener)

    2. 主进程---->渲染进程

    发送端:

    ① 被动发送

    在主进程通过ipcMain.on接收到渲染进程的消息时,可以通过listener函数的event参数得到发送者, 回复消息,

    event.sender.send(channel, data)

    ② 主动发送

    win(要发送给的渲染进程窗体对象变量).webContents.send(channel, data)

    接收端:

    ipcRenderer.on(channel, listener)

    有了以上背景知识,页面间通信就很简单了,页面1发送事件给主进程,主进程再发送事件给页面2即可。

    注:

    在Electron 5.x以后的版本,渲染进程默认没有启用Node.js环境,

    在创建窗体时需要指定启用Node环境,否则require命令在渲染进程中将不支持,无法导入electron中的ipcRenderer。

    let win = newBrowserWindow({webPreferences: {

    nodeIntegration:true}

    })

    展开全文
  • 前言由于自己在使用electron开发一类似微信的...目前整个项目的基础架构都实现差不多了,包括整个应用的数据持久化(使用的是 sqlite,因为我比较喜欢用 sequelize)、语言、主题设置、窗口之间通信方式 和 带...
  • vue各页面/组件之间通信

    千次阅读 2021-03-05 14:46:38
    在B页面中,页面显示就会触发的函数里判断是否有这key,如果有就执行相应的动作并删掉这key 二、通过Vue.prototype挂载一全局的对象 在main.js中定义 Vue.prototype.$EventBus = new Vue() 在B页面中,页面...
  • (同源:如两个页面的协议、IP地址、端口号相同,即为同源页面) 缺点: ① cookie 空间有限,浏览器在每个域名下最多能设置30-50个cookie,容量最多4k左右 ② 每次 HTTP 请求会把当前域的所有cookie发送到服务器上...
  • 云服务器之间怎么通信 内容精选换一换华为云帮助中心,为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档,帮助您快速上手使用华为云服务。私网NAT网关...
  • 引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或...
  • 1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、窗口、跨域消息传递 2、postMessage(data,origin)方法接受两参数: (1)data:要传递的数据,html5规范中提到该参数...
  • 项目中遇到这么个cr—在新打开的页面提交文件后关闭这个页面后就刷新原本的父页面渲染出提交的数据,有想过用vuex的,但是太复杂要改动的东西太没必要,之后想到过用window.opener.location.reload()这个方法的,...
  • 介绍在组件化开发的时候,组件之间是相互独立的没有依赖关系,我们不能在使用显示调用来跳转页面了,因为我们组件化的目的之一就是解决模块间的强依赖问题,假如现在要从A业务组件跳转到业务B组件,并且要携带参数...
  • 本文将从小白的角度,讲解两台计算机之间是如何精确的找到对方的位置并发送和接收消息的,以帮助读者从宏观角度把握计算机网络的体系结构。
  • 大家好,我是前端岚枫,今天主要跟大家分享我整理的笔记2021前端面试题系列:fetch与axios、浏览器内...fetch 是一低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。多年来,XML.
  • 最近在处理一个weex三端的项目,在weex文档中提到,不同的 Weex 页面使用的是不同的执行环境,即使全局变量也是互相隔离的,官方推荐使用... 使用BroadcastChannel每个页面通过创建一个具有相同频道名称的 Bro...
  • 服务器之间传输数据是如何通信

    千次阅读 2021-02-05 15:27:50
    一般情况下比如我们设计一个后端服务,包括多个服务器:数据库服务器,web服务器,文件服务器、缓存服务器等的通信,一般是通过socket来设计专门的通信协议,因为比较高效。比如MySQL,MS SQL等也都是有知名的专用...
  • Native和H5之间的数据传递,这数据传递的复杂度宽度就比较大了(1)简单的Native向H5传递数据可以采用url后面加参数的方式,这种方式只能传递map类型数据,即以Key = value 的形式传递,并且只能单向传递。...
  • 其实计网通篇钻研的外围就是不同计算机之间通信过程,???? 本文将从小白的角度,解说两台计算机之间是如何准确的找到对方的地位并发送和接管音讯的,以帮忙读者从宏观角度把握计算机网络的体系结构。五层协定参考...
  • 客户端与服务器之间通信过程 内容精选换一换一、HTTP概念超文本传输协议(HTTP,HyperTextTransferProtocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这标准。设计HTTP最初的目的是为了提供...
  • 最近在开发中遇到一场景,有一列表页和详情页,由于业务需求,需要用新标签页来打开详情页,因此我用了window.open()打开详情页,详情页中有一保存功能,保存后需要触发一事件,让列表页监听执行刷新列表的...
  • 本题主要考察数据存储的知识,数据存储有本地和服务器存储两种方式。这里主要讲解用本地存储方式解决。...即可得到 localstorge 存储的值,实现不同标签页之间通信。 标签页1: <input id="name"> <i.
  • 简单来说就是不允许【两个同一网站的页面】在【同一用户】浏览器中【同时】做相同的事情,比如页面a和页面b,两个页面都在浏览器中打开了,a在做某个事情之前怎么知道b也在做相同的事情,从而终止做这个事情的想法呢...
  • 标签页之间通信

    2021-09-27 08:47:36
    首先,我们需要能够分辨出"使用Vuex、Redux的场景"和"当前场景"有什么区别? Vuex、Redux应用于SPA(单页面)应用的...我们现在讨论的并非SPA应用的跨组件通信,而是多页面之间的跨页面通信。 解决方案有两种思路:浏
  • python 线程 通信

    2020-12-18 13:32:48
    一篇文章搞定Python进程(全)公众号:pythonislover前面写了三篇关于python线程的文章,大概概况了线程使用中的方法,文章链接如下:一篇文章搞懂Python线程简单实现和GIL - ...文章南山yrg2019-05-052651浏览量...
  • 多个标签页之间的通讯和单页面通讯(VUE)使用VUEX不同,它主要是在各个标签页之间数据交互。 多个标签页之间的数据交互主要有以下两种方式: 浏览器存储 localStorage方式 在一个标签页使用localStorage.setItem...
  • Electron 进程通信

    2020-12-29 09:55:22
    什么是ElectronElectron 是前端...Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互。 当你在 Electron 应用中的一窗口操作...
  • Electron进程间通信

    2020-12-29 09:55:22
    进程间有多种方法进行通信。一、主进程和渲染进程1、主进程Mainmain.js在启动应用后就创建了一主进程main process,它可以通过electron中的一些模块直接与原生GUI(在你的应用窗口)交互。2、渲染进程Renderer仅...
  • 文章整理于:https://ask.dcloud.net.cn/article/35970uni-app 是一使用 vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iO...
  • 计算机之间是如何互相通信的 相同网段的通信 不同网段的通信 计算机如何访问Internet 第一步:域名解析 第二步:打包http报文 第三步:http触发TCP进程三次握手连接 第四步:TCP传输HTTP 第五步:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 251,124
精华内容 100,449
关键字:

多个页面之间如何进行通信