WebSocket 简单介绍
WebSocket百度百科
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
webSocket和轮询推送技术对比
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。
轮询
是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
WebSocket
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:
方法 | 描述 |
---|---|
Socket.send() | 使用连接发送数据 |
Socket.close() | 关闭连接 |
WebSocket 在 vue 中使用
methods: {
// web socket
initWebSocket() {
this.webSocket = null
// 判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
// 初始化weosocket(必须) 配置服务器端 WebSocket 接受 url, 此处按照自己的项目路径进行配置
let socketUrl = `${Constants.WEBSOCKET_URL}?token=` + Vue.ls.get(ACCESS_TOKEN)
this.webSocket = new WebSocket(socketUrl) // 新建一个webstock对象
this.webSocket.onopen = this.webSocketOnOpen
this.webSocket.onmessage = this.webSocketOnMessage
this.webSocket.onerror = this.webSocketOnError
this.webSocket.onclose = this.webSocketOnClose
} else {
this.$message.error('当前浏览器不支持 websocket')
}
},
webSocketOnOpen() {
console.log('---连接建立成功---')
this.heartbeatTimer = setInterval(() => {
this.websocketsend('PING')
}, 30 * 1000) // 30 秒发一次心跳包
},
webSocketOnError() {},
webSocketOnMessage(e) {
// 数据接收
this.redata = JSON.parse(e.data)
console.info('this.redata=', this.redata)
//此处获取到服务器推送的数据,就可以进行后续操作 。。。
},
websocketsend(Data) {
// 数据发送
this.webSocket.send(Data)
},
webSocketOnClose(e) {
console.log('断开连接', e)
if (this.heartbeatTimer) {
clearInterval(this.heartbeatTimer) //清除定时器
}
}
}