一、WebSocket介绍与原理
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信。一开始的握手需要借助HTTP请求完成。
原理
WebSocket同HTTP一样也是应用层的协议，但是它是一种双向通信协议，是建立在TCP之上的。
-- 连接过程
- 浏览器、服务器建立TCP连接，三次握手
- WebSocket握手
- 浏览器发送请求
- 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据
-
断开TCP连接
-- 如下图所示
websocket
二、WebSocket与HTTP的关系
相同点
- 都是一样基于TCP
- 都是应用层协议
不同点
- WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息。HTTP是单向的
-
WebSocket是需要握手进行建立连接的
如下图所示：
websocket
三、WebSocket JS Client
1、WebSocket属性
props.png
2、WebSocket事件
WX20200419-173139@2x.png
3、 创建WebSocket 实例
example
4、收发数据
- 收发数据
connection.send("hello world!")
- 接受数据
ws.onmessage = data => {
console.log(data.data)
}
- 错误处理
通过onerror函数进行回调
ws.onerror = e => {
console.log(ws.readyState, 'websocket.readyState onerror')
}
- 关闭事件
ws.onclose = data => {
console.log(ws.readyState,'关闭时状态')
}
四、WebSocket Node Server
- 建立Node Http Server
var http = require('http')
var server = http.createServer((request,response) =>{} )
- 监听端口
server.listen(3000, () => {
console.log('server is listening on port 3000')
})
- 建立webSocket Sever
var websocket = require('websocket').server
var wsServer = new webSocket({httpServer: server})
总结
WebSocket在用于双向传输、推送消息方面能够做到灵活、简便、高效，但在普通的Request-Response过程中并没有太大用武之地，比起普通的HTTP请求来反倒麻烦了许多，甚至更为低效。比如某些场景只需要简单的Request-Response，如果换做WebSocket还需要增加一个请求标识RequestId，增加成本。每项技术都有自身的优缺点，在适合它的地方能发挥出最大长处，而看到它的几个优点就不分场合地全方位推广的话，可能会适得其反。
