加入收藏 | 设为首页 | 会员中心 | 我要投稿 我爱故事小小网_铜陵站长网 （http://www.0562zz.com/）- 视频终端、云渲染、应用安全、数据安全、安全管理!
当前位置： 首页 > 运营中心 > 建站资源 > 优化 > 正文

浅谈Web 实时推送技术，有对比，有总结

发布时间：2019-04-07 12:40:36 所属栏目：优化 来源：程序猿的内心独白
导读：副标题#e# 前言 随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高 ，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动地刷新页面。本文对过去和现在流行的 Web

iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。

  • 优点：消息能够实时到达；浏览器兼容好
  • 缺点：服务器维护一个长连接会增加开销；IE、chrome、Firefox会显示加载没有完成，图标会不停旋转。
  1. // 3.html 
  2.  
  3. <body> 
  4.  
  5. <div id="clock"></div> 
  6.  
  7. <iframe src="/clock" style="display:none"></iframe> 
  8.  
  9. </body> 
  10.  
  11. //iframe流 
  12.  
  13. let express = require('express') 
  14.  
  15. let app = express() 
  16.  
  17. app.use(express.static(__dirname)) 
  18.  
  19. app.get('/clock', function(req, res) { 
  20.  
  21. setInterval(function() { 
  22.  
  23. let date = new Date().toLocaleString() 
  24.  
  25. res.write(` 
  26.  
  27. <script type="text/javascript"> 
  28.  
  29. parent.document.getElementById('clock').innerHTML = "${date}";//改变父窗口dom元素 
  30.  
  31. </script> 
  32.  
  33. `) 
  34.  
  35. }, 1000) 
  36.  
  37. }) 
  38.  
  39. app.listen(8080) 

启动本地服务，打开http://localhost:8080/3.html,得到如下结果：

浅谈Web 实时推送技术，有对比，有总结

上述代码中，客户端只请求一次，然而服务端却是源源不断向客户端发送数据，这样服务器维护一个长连接会增加开销。

以上我们介绍了三种实时推送技术，然而各自的缺点很明显，使用起来并不理想，接下来我们着重介绍另一种技术--websocket,它是比较理想的双向通信技术。

二、WebSocket

1.什么是websocket

WebSocket是一种全新的协议，随着HTML5草案的不断完善，越来越多的现代浏览器开始全面支持WebSocket技术了，它将TCP的Socket（套接字）应用在了webpage上，从而使通信双方建立起一个保持在活动状态连接通道。

一旦Web服务器与客户端之间建立起WebSocket协议的通信连接，之后所有的通信都依靠这个专用协议进行。通信过程中可互相发送JSON、XML、HTML或图片等任意格式的数据。由于是建立在HTTP基础上的协议，因此连接的发起方仍是客户端，而一旦确立WebSocket通信连接，不论服务器还是客户端，任意一方都可直接向对方发送报文。

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？

2.HTTP的局限性

  • HTTP是半双工协议，也就是说，在同一时刻数据只能单向流动，，客户端向服务器发送请求(单向的)，然后服务器响应请求(单向的)。
  • 服务器不能主动推送数据给浏览器。这就会导致一些高级功能难以实现，诸如聊天室场景就没法实现。

3.WebSocket的特点

  • 支持双向通信，实时性更强
  • 可以发送文本，也可以发送二进制数据
  • 减少通信量：只要建立起WebSocket连接，就希望一直保持连接状态。和HTTP相比，不但每次连接时的总开销减少，而且由于WebSocket的首部信息很小，通信量也相应减少了
浅谈Web 实时推送技术，有对比，有总结
  •  

相对于传统的HTTP每次请求-应答都需要客户端与服务端建立连接的模式，WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前，不需要客户端和服务端重新发起连接请求。在海量并发和客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。

接下来我看下websocket如何实现客户端与服务端双向通信：

  1. // websocket.html 
  2.  
  3. <div id="clock"></div> 
  4.  
  5. <script> 
  6.  
  7. let clockDiv = document.getElementById('clock') 
  8.  
  9. let socket = new WebSocket('ws://localhost:9999') 
  10.  
  11. //当连接成功之后就会执行回调函数 
  12.  
  13. socket.onopen = function() { 
  14.  
  15. console.log('客户端连接成功') 
  16.  
  17. //再向服务 器发送一个消息 
  18.  
  19. socket.send('hello') //客户端发的消息内容 为hello 
  20.  
  21. } 
  22.  
  23. //绑定事件是用加属性的方式 
  24.  
  25. socket.onmessage = function(event) { 
  26.  
  27. clockDiv.innerHTML = event.data 
  28.  
  29. console.log('收到服务器端的响应', event.data) 
  30.  
  31. } 
  32.  
  33. </script> 
  34.  
  35. // websocket.js 
  36.  
  37. let express = require('express') 
  38.  
  39. let app = express() 
  40.  
  41. app.use(express.static(__dirname)) 
  42.  
  43. //http服务器 
  44.  
  45. app.listen(3000) 
  46.  
  47. let WebSocketServer = require('ws').Server 
  48.  
  49. //用ws模块启动一个websocket服务器,监听了9999端口 
  50.  
  51. let wsServer = new WebSocketServer({ port: 9999 }) 
  52.  
  53. //监听客户端的连接请求 当客户端连接服务器的时候，就会触发connection事件 
  54.  
  55. //socket代表一个客户端,不是所有客户端共享的，而是每个客户端都有一个socket 
  56.  
  57. wsServer.on('connection', function(socket) { 
  58.  
  59. //每一个socket都有一个唯一的ID属性 
  60.  
  61. console.log(socket) 
  62.  
  63. console.log('客户端连接成功') 
  64.  
  65. //监听对方发过来的消息 
  66.  
  67. socket.on('message', function(message) { 
  68.  
  69. console.log('接收到客户端的消息', message) 
  70.  
  71. socket.send('服务器回应:' + message) 
  72.  
  73. }) 
  74.  
  75. }) 

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的优质浏览效果

      Copygight © 2016-2023 http://www.0562zz.com/ All Rights Reserved. 我爱故事小小网_铜陵站长网

      ICP备案：浙ICP备16034787号 浙公网安备 33038102330570号