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实现浏览器中多个标签页之间的通信的更多相关文章

  1. 利用cookie实现浏览器中多个标签页之间的通信

    原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页 ...

  2. 利用localStorage实现浏览器中多个标签页之间的通信

    原理: localStorage是浏览器存储数据的容器,而且它是多页面共享的,利用localStorage多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到l ...

  3. 浏览器内多个标签页之间的通信之storage

    在一个标签页里面使用 localStorage.setItem(key,value)添加(修改.删除)内容: 在另一个标签页里面监听 storage 事件. 即可得到 localstorge 存储的值 ...

  4. webdriver高级应用- 浏览器中新开标签页（Tab）

    #encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...

  5. 实现多个标签页之间通信的几种方法(sharedworker)

      效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html ...

  6. sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开

    一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...

  7. C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)

    在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...

  8. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

  9. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

随机推荐

  1. 在最新的 create-react-app 中添加 less 支持

    前置知识: 把 webpack 的相关配置暴露出来 运行 git add -A 运行 git commit -m 'project init' 运行 yarn eject 然后选 y 项目中多出来两个 ...

  2. Task的用法

    创建任务 无返回值的方式 方式1: var t1 = new Task(() => TaskMethod("Task 1")); t1.Start(); Task.WaitA ...

  3. SpringBoot 整合Shiro 一指禅

    目标 了解ApacheShiro是什么,能做什么: 通过QuickStart 代码领会 Shiro的关键概念: 能基于SpringBoot 整合Shiro 实现URL安全访问: 掌握基于注解的方法,以 ...

  4. IO负载高来源定位pt-ioprofile

    1.使用top -d 1 查看%wa是否有等待IO完成的cpu时间,简单理解就是指cpu等待磁盘写入完成的时间:IO等待所占用的cpu时间的百分比,高过30%时IO压力高: 2.使用iostat -d ...

  5. iptables添加、删除端口

    简洁才是王道, 下面是添加一个udp端口,端口号8566,即接收到8566端口的所有udp包 /sbin/iptables -I INPUT -p udp --dport -j ACCEPT 要删除这 ...

  6. hibernate缓存机制与N+1问题

    在项目中遇到的趣事 本文基于hibernate缓存机制与N+1问题展开思考, 先介绍何为N+1问题 再hibernate中用list()获得对象: /** * 此时会发出一条sql,将30个学生全部查 ...

  7. Hibernate一级缓存之懒加载问题

    Hibernate的懒加载: 当用到数据的时候才向数据库查询,这就是hibernate的懒加载特性. 目的,为提高程序执行效率. 查询操作:get()方法/load()方法 (1)get()方法,及时 ...

  8. C# 图片文件文本string格式 传输问题

    string file = @"E:\test.png"; byte[] bytes = File.ReadAllBytes(file); // 主要代码 string datas ...

  9. Monkey测试：Monkey的简单使用

    Monkey是Android SDK提供的一个命令行工具,可以简单方便的发送伪随机的用户事件流,对Android APP做压力(稳定性)测试.主要是为了测试app是否存在无响应和崩溃的情况. 一.环境 ...

  10. 远程桌面 虚拟打印 到本地打印机（虚拟化 终端 远程接入 RemoteApp）

    使用远程桌面或remoteapp进行打印时,若需使用本地的打印机,需要通过重定向方式,但本地打印机如果五花八门比较杂,那给服务器安装打印机驱动很麻烦. 其实可以借助虚拟打印机简化操作,省去给服务器安装 ...