Vue 中封装 websocket
let wsurl = 'ws://82.157.123.54:9010/ajaxchattest'
let ws = null
let weboscket_callback = null
//获取 websocket 推送的数据
let websocketonmessage = e => {
return weboscket_callback(e)
}
// 连接成功
let websocketonopen = () => {
console.log('连接 websocket 成功')
}
// 连接失败时重新连接
let websocketonerror = () => {
initWebSocket()
}
// 断开链接后报错
let websocketclose = e => {
console.log('断开连接', e)
}
// 手动关闭 websocket
let closewebsocket = () => {
ws.close()
}
let initWebSocket = () => {
//初始化 websocket
ws = new WebSocket(wsurl)
ws.onmessage = websocketonmessage
ws.onopen = websocketonopen
ws.onerror = websocketonerror
ws.onclose = websocketclose
}
// 发送数据
let sendData = (data, callback) => {
weboscket_callback = callback
// 判断 data 数据类型
if (typeof data == 'string') {
data = data
} else {
data = JSON.stringify(data)
}
// 判断 websocket 的状态
if (ws.readyState === ws.OPEN) {
// 已经打开,可以直接发送
ws.send(data)
} else if (ws.readyState === ws.CONNECTING) {
// 正在开启状态中,则 1 秒后重新发送
setTimeout(() => {
ws.send(data)
}, 1000)
} else {
// 未打开，则开启后重新调用
initWebSocket()
sendData(data, callback)
}
}
// 导出
export { initWebSocket, sendData, closewebsocket }
在组件中引用：
import { sendData, closewebsocket } from '../../utils/websocket'
在methods中:
// 用来接收 websocket 推送的数据
test(e) {
console.log(e.data)
},
// 发送数据
send(){
sendData('dfa', this.test)
setTimeout(() => {
closewebsocket()
}, 3000)
setTimeout(() => {
sendData('重新发送', this.test)
}, 5000)
let i = 0
setInterval(() => {
sendData(i++, this.test)
}, 6000)
}
封装好的js文件：https://blog-static.cnblogs.com/files/lyt520/websocket.js
参考链接：https://blog.csdn.net/qq_39186346/article/details/81941664?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_v2~rank_aggregation-1-81941664.pc_agg_rank_aggregation&utm_term=vue%E9%A1%B9%E7%9B%AE%E5%B0%81%E8%A3%85websocket&spm=1000.2123.3001.4430
