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