利用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 ...
随机推荐
- js控制页面每次滚动一屏，和楼梯效果
我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...
- JMS学习四（ActiveMQ消息过滤）
一.消息的选择器 不管是在消息发送端设置消息过期时间还是在接收端设置等待时间,都是对不满足的消息有过滤的作用,那消息选择器就是为过滤消息而生的下面来看看消息选择器: ActiveMQ提供了一种机制,使 ...
- HDU2179--pi（麦金公式）
Problem Description 计算圆周率到小数点后5n 位.(本题不可打表) Input 正整数n<300. n=0结束. Output 圆周率pi到小数点后5n位.第1行输出3.以5 ...
- Python 爬虫如何入门学习？
"入门"是良好的动机,但是可能作用缓慢.如果你手里或者脑子里有一个项目,那么实践起来你会被目标驱动,而不会像学习模块一样慢慢学习. 另外如果说知识体系里的每一个知识点是图里的点,依 ...
- 第五周课程总结&试验报告 （三）
课程总结 一,类的继承格式 1.在 Java 中通过 extends 关键字可以申明一个类是从另外一个类继承而来的,一般形式如下: class 父类 {} class 子类 extends 父类 {} ...
- angular 语法的应用
angular.js 一个js框架 , 是三大主流框架之一:( vue react angular ): 原先的开发:前端和后台,利用 Ajax 进行交互, 但是框架却提出了一种开发模式:mvc 这 ...
- 思科端口聚合的命令是channel-group
锐捷设备的端口聚合命令是: int range f0/1-2 port-group 1 --------------------- == 思科设备的端口聚合 是: int range f0/1-2 c ...
- 利用Git版本控制管理你的项目
准备工作 项目创建完成后,将项目版本控制起来,今后每个版本的迭代会非常清楚,同时也有助于项目进行协同开发. 还有一个十分重要的问题是:项目上线后,线上的运行的程序的配置与线下进行测试的配置文件是不一样 ...
- C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib,该怎么解决
C# WinForm 添加Windows Media Player 控件调试出现未能加载文件或程序集Interop.WMPLib如标题,在窗体中添加Windows Media Player 控件,当调 ...
- Stream之filter、distinct、skip、map、flatMap、match、find、reduce
一.Stream之filter.distinct.skip: package com.cy.java8; import java.util.Arrays; import java.util.List; ...