什么是WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
如何实现
废话不多说,直接上连接函数的代码
getWebSocket() {
var socket;
//如果浏览器支持WebSocket
if (window.WebSocket) {
//参数就是与服务器连接的地址
socket = new WebSocket("ws://192.168.xxx.xxx:xxxx/ws");
const self = this
//客户端收到服务器消息的时候就会执行这个回调方法
socket.onmessage = function(event) {
console.log('客户端收到服务器消息的时候就会执行这个回调方法', event.data)
const k = JSON.parse(event.data)
if(k.code == 200) {
}else {
self.indexcode = k.indexcode
self.errList = event.data
}
console.log('json', k)
}
//连接建立的回调函数
socket.onopen = function(event) {
console.log('连接建立的回调函数', event)
if (!window.WebSocket) {
return;
}
//当websocket状态打开
if (socket.readyState == WebSocket.OPEN) {
var json = {
id: "user001"
};
var jsonstr = JSON.stringify(json);
socket.send(jsonstr);
} else {
alert("连接没有开启");
}
}
//连接断掉的回调函数
socket.onclose = function(event) {
// var ta = document.getElementById("responseText");
// ta.value = ta.value + "\n" + "连接关闭";
}
} else {
alert("浏览器不支持WebSocket!");
}
},
在需要时调用函数和后端连接即可,连接成功后就可以进行调用函数收发数据
附赠一个websocket的class封装
class VueSocket {
/**
* @param {string} url
* @param {function} commit,
* @param {function} handleData
*/
constructor(url, commit, handleData = null) {
this.url = url
this.commit = commit
this.distributeData = handleData
this.ws = null // WebSocket对象
this.heartbeatTimer = null
this.errorResetTimer = null // 错误重连轮询器
this.disconnectSource = '' // 断开来源 'close' 'error'
this.disconnectNumber = 0 // 重连次数
this.errorDispatchOpen = true // 开启错误调度
this.closeSocket = false
this.init()
}
/**
* @description 错误调度
* @param {string} type 断开来源 => 'close' | 'error
* @returns {function}
*/
static errorDispatch(type) {
return () => {
if (this.disconnectSource === '' && this.errorDispatchOpen) {
this.disconnectSource = type
}
console.log(`[Disconnected] WebSocket disconnected from ${type} event`)
// socket断开处理
if (this.disconnectSource === type && !this.closeSocket) {
this.errorResetTimer && clearTimeout(this.errorResetTimer)
VueSocket.handleDisconnect()
}
}
}
/**
* @description 重连尝试
* @returns {undefined}
*/
static handleDisconnect() {
// 重连4次宣布失败
if (this.reconnectNumber >= 4) {
this.reconnectNumber = 0
this.disconnectSource = ''
this.errorResetTimer = null
this.errorDispatchOpen = false
this.ws = null
console.log('[failed] WebSocket connect failed')
}
// 重连尝试
this.errorResetTimer = setTimeout(() => {
this.init()
this.reconnectNumber++
console.log(`[socket reconnecting ${this.reconnectNumber} times...]`)
}, this.reconnectNumber * 1000)
}
/**
* @description 事件轮询器
* @param {number | string} 开始条件 事件
* @param {number | string} outerCondition 停止条件
* @param {number} time
* @param {function} callback
*/
eventPoll(event, outerCondition, time, callback) {
let currentCondition
const timer = setInterval(() => {
if (currentCondition === outerCondition) {
clearInterval(timer)
callback && callback()
}
currentCondition = event.call(this)
}, time)
}
/**
* @description 初始化连接,开始订阅消息
* @param {function} callback
*/
init(callback) {
// 如果已经手动关闭socket,则不允许初始化
if (this.closeSocket) {
throw new Error('[Error] WebSocket has been closed.')
}
// 清除心跳检测计时器
this.heartbeatTimer && clearTimeout(this.heartbeatTimer)
this.ws = new WebSocket(this.url)
this.ws.onopen = () => {
callback && callback()
this.reconnectNumber = 0
this.disconnectSource = ''
this.errorResetTimer = null
this.errorDispatchOpen = true
// 订阅消息
this.subscribe()
// 开启心跳侦测
this.heartbeatDetect()
console.log('[Open] Connected')
}
this.ws.onclose = VueSocket.errorDispatch('close')
this.ws.onerror = VueSocket.errorDispatch('error')
}
/**
* @description 订阅器
*/
subscribe() {
this.ws.onmessage = (res) => {
if (res.data) {
const data = JSON.parse(res.data)
// 根据任务类型,分发数据
try {
this.distributeData && this.distributeData(data, this.commit)
} catch (e) {
console.log(e)
}
}
// 收到消息关闭上一个心跳定时器并启动新的定时器
this.heartbeatDetect()
}
}
/**
* @description 发布器(组件发消息的)
* @param {String} data
* @param {Function} callback
*/
emit(data, callback) {
const state = this.getSocketState()
if (state === this.ws.OPEN) {
this.ws.send(JSON.stringify(data))
callback && callback()
this.heartbeatDetect()
} else if (state === this.ws.CONNECTING) {
// 连接中轮询
this.eventPoll(this.getSocketState, this.ws.OPEN, 500, () => {
this.ws.send(JSON.stringify(data))
callback && callback()
this.heartbeatDetect()
})
} else {
this.init(() => {
this.emit(data, callback)
})
}
}
/**
* @description 获取当前socket
*/
getSocketState() {
return this.ws.readyState
}
/**
* @description 手动连接
*/
open() {
if (!this.closeSocket) {
throw new Error('[Error] WebSocket is connected')
}
this.heartbeatTimer = null
this.reconnectNumber = 0
this.disconnectSource = null
this.errorDispatchOpen = true
this.closeSocket = false
this.init()
}
/**
* @description 手动关闭连接
*/
close() {
this.heartbeatTimer && clearTimeout(this.heartbeatTimer)
this.errorResetTimer && clearTimeout(this.errorResetTimer)
this.closeSocket = true
this.ws.close()
}
/**
* @description 心跳侦测
*/
heartbeatDetect() {
this.heartbeatTimer && clearTimeout(this.heartbeatTimer)
this.heartbeatTimer = setTimeout(() => {
const state = this.getSocketState()
if (state === WebSocket.OPEN || state === WebSocket.CONNECTING) {
const heart = { socketType:'heart' }
this.ws.send(JSON.stringify(heart))
this.heartbeatDetect()
} else {
this.init()
}
}, 5000)
}
}
export default VueSocket
最后
以上就是webSocket的使用方法,看完有帮助的小伙伴点个赞再走吧