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

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

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

2.HTTP的局限性

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

3.WebSocket的特点

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

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

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

// websocket.html 
 
<div id="clock"></div> 
 
<script> 
 
let clockDiv = document.getElementById('clock') 
 
let socket = new WebSocket('ws://localhost:9999') 
 
//当连接成功之后就会执行回调函数 
 
socket.onopen = function() { 
 
console.log('客户端连接成功') 
 
//再向服务 器发送一个消息 
 
socket.send('hello') //客户端发的消息内容 为hello 
 
} 
 
//绑定事件是用加属性的方式 
 
socket.onmessage = function(event) { 
 
clockDiv.innerHTML = event.data 
 
console.log('收到服务器端的响应', event.data) 
 
} 
 
</script> 
 
// websocket.js 
 
let express = require('express') 
 
let app = express() 
 
app.use(express.static(__dirname)) 
 
//http服务器 
 
app.listen(3000) 
 
let WebSocketServer = require('ws').Server 
 
//用ws模块启动一个websocket服务器,监听了9999端口 
 
let wsServer = new WebSocketServer({ port: 9999 }) 
 
//监听客户端的连接请求 当客户端连接服务器的时候，就会触发connection事件 
 
//socket代表一个客户端,不是所有客户端共享的，而是每个客户端都有一个socket 
 
wsServer.on('connection', function(socket) { 
 
//每一个socket都有一个唯一的ID属性 
 
console.log(socket) 
 
console.log('客户端连接成功') 
 
//监听对方发过来的消息 
 
socket.on('message', function(message) { 
 
console.log('接收到客户端的消息', message) 
 
socket.send('服务器回应:' + message) 
 
}) 
 
}) 

（编辑：西安站长网）

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