webSocket初探

一、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，增加成本。每项技术都有自身的优缺点，在适合它的地方能发挥出最大长处，而看到它的几个优点就不分场合地全方位推广的话，可能会适得其反。