利用webSocket实现浏览器中多个标签页之间的通信
webSoket用来实现双向通信，客户端和服务端实时通信。
webSoket优点和缺点？
优点：对于前端来说，使用简单，功能灵活，如果部署了webSocket服务器，可以实现实时通信。
缺点：需要服务端技术的支持，如果websocket数据量比较大的话，会严重消耗服务器的资源。
例子：
01 websocket服务器端搭建
//初始化一个node项目：node init，一路确认就可以,文件夹会自动创建一个package.json文件
// 下载ws文件 npm i -save ws
//获得WebSocketServerr类型
var WebSocketServer = require('ws').Server;
//创建WebSocketServer对象实例，监听指定端口
var wss = new WebSocketServer({ port:8080 });
//创建保存所有已连接到服务器的客户端对象的数组
var 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(var c of clients){
if(c!=client){//把消息发给别人
c.send(msg);
}
}
})
}
})
02 用来发送信息的标签页
<!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>
<!-- 这个页面是用来发送信息的 -->
<input type="text" id="msg">
<button id="send">发送</button>
<script>
//建立到服务端webSoket连接
var ws=new WebSocket("ws://localhost:8080")
send.onclick=function(){
if(msg.value.trim()!=''){//如果msg输入框内容不是空的
ws.send(msg.value.trim()) //将msg输入框中的内容发送给服务器
}
}
</script>
</body>
</html>
03 接收消息的标签页
<!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>
<!-- 这个标签页是用来接收信息的 -->
<h1 >收到的消息:<p id="recMsg"></p></h1>
<script>
//建立到服务端webSoket连接
var ws=new WebSocket("ws://localhost:8080")
//当连接被打开时，注册接收消息的处理函数
ws.onopen=function(event) {
//当有消息发过来时，就将消息放到显示元素上
ws.onmessage=function(event) {
recMsg.innerHTML=event.data;
}
}
</script>
</body>
</html>
利用webSocket实现浏览器中多个标签页之间的通信的更多相关文章
- 利用cookie实现浏览器中多个标签页之间的通信
原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页 ...
- 利用localStorage实现浏览器中多个标签页之间的通信
原理: localStorage是浏览器存储数据的容器,而且它是多页面共享的,利用localStorage多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到l ...
- 浏览器内多个标签页之间的通信之storage
在一个标签页里面使用 localStorage.setItem(key,value)添加(修改.删除)内容: 在另一个标签页里面监听 storage 事件. 即可得到 localstorge 存储的值 ...
- webdriver高级应用- 浏览器中新开标签页（Tab）
#encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...
- 实现多个标签页之间通信的几种方法(sharedworker)
效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html ...
- sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开
一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...
- C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)
在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...
- EasyUI中动态生成标签页
这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...
- web前端中实现多标签页切换的效果
在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...
随机推荐
- 【Leetcode】二叉树的最小深度
题目: 给定一个二叉树,找出其最小深度. 注意最小深度的定义! 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 一.递归法 时间复杂度:O(n).需要 ...
- logstash之Filter插件
Logstash之所以强悍的主要原因是filter插件:通过过滤器的各种组合可以得到我们想要的结构化数据 1:grok正则表达式 grok**正则表达式是logstash非常重要的一个环节**:可以通 ...
- Oracle JET mobile 入门使用
Oracle JET 框架能开发 window, Android, ios 的 WebApp .主要使用 Codova 来进行开发. 简单使用 Oracle JET 开发 Android webapp ...
- leetcode-mid-others-621. Task Scheduler
mycode 53.01% 这个题在纸上画一画就知道啦,只要出现次数最多的字母能够满足要求,其他更少的字母穿插在其中,间隔就更满足<n啦,当然,最后不要忘记加上尾巴哦,尾巴和出现次数最多的字 ...
- Octavia 的 HTTPS 与自建、签发 CA 证书
目录 文章目录 目录 Octavia 为什么需要自建 CA 证书? GenerateServerPEMTask CertComputeCreate Amphora Agent AmphoraAPICl ...
- JavaWeb项目:Shiro实现简单的权限控制(整合SSM)
该demo整合Shiro的相关配置参考开涛的博客 数据库表格相关设计 表格设计得比较简单,导航栏直接由角色表auth_role的角色描述vRoleDesc(父结点)和角色相关权限中的权限描述(标记为 ...
- Excel区域复制粘贴
这段工作做的是利用JAVA实现Excel的一块区域的复制并粘贴. 就本身对于 Excel跟 鼠标来说,这也是一个非常简单的操作. 但是 用 java的poi来做,还是 有点儿吃力的. 下面是之前做的一 ...
- LeetCode算法题-Flipping an Image（Java实现）
这是悦乐书的第324次更新,第347篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第194题(顺位题号是832).给定二进制矩阵A,我们想要水平翻转图像,然后反转它,并返 ...
- JDK8新特性之一Lambda
JDK8的新特性之一Lambda能将函数作为方法里面的参数使用. /** * JDK8新特性Lambda */ public class Test { public static void main( ...
- poker
一副扑克牌有n张牌.一般你买的一副新扑克牌里除了这n张牌外还会有一些张特殊的牌,如果你不小心弄丢了n张牌中的某一张,就可以用特殊牌来代替,但是如果你弄丢两张的话就没有办法了,因为特殊牌上的图案是一样的 ...