vue项目里如何使用websocket实现前后端信息交互
【代码】vue项目里如何使用websocket实现前后端信息交互。
·
const websocket = ref(null)
//WebSocket 协议有两个主要版本:ws和wss。ws表示非加密的 WebSocket 连接,wss表示加密的它的版本,类似于 HTTP 和 HTTPS 的关系。ws通过 http 传输,wss通过 https 传输。
//为了保证在 HTTPS 网站下的数据安全与一致性,必须使用wss。如果在 HTTPS 网站下使用ws,浏览器会报错,因为它将ws视为不安全的链接,因此它会阻止建立此类连接。
const urlByProtocol = (url)=>{
let httpString = 'http'
let httpsString = 'https'
let c = '://'
let b = url.split(c)
if(b[0]===httpsString ){
b[0] = 'wss'
}else{
b[0] = 'ws'
}
let httpUrl = b.join(c)
return httpUrl
}
// 登录ur1
const baseUrl=async function(){
let config = await runtimeConfig()
let url= config.baseUrl
return url
}
// 创建 websocket 链接
async function createWebSocket() {
let url = await baseUrl()
let httpURL = urlByProtocol(url)
let path = httpURL + "/xxx/websocket/" + url
websocket.value = new WebSocket(path)
// 连接发生错误的回调方法
websocket.value.onerror = webSocketOnError
// 连接成功建立的回调方法
websocket.value.onopen = webSocketOnOpen
// 接收到消息的回调方法
websocket.value.onmessage = webSocketOnMessage
// 连接关闭的回调方法
websocket.value.onclose = webSocketOnClose
// 监听窗口关闭事件,当窗口关闭时,主动去关闭websgcket连接,防止连接还没断开就关闭窗口,server端会抛异常。
websocket.value.onbeforeunload = webSocketOnBeforeUnload;
}
//连接发生错误的回调方法
function webSocketOnError(){
//proxy.$message.error(连接WebSocket失败’)
}
// 连接成功建立的回调方法
function webSocket0n0pen(event){
// console.log(’连接成功建立的回调方法’,event)
}
//接收到消息的回调方法
function webSocketOnMessage(event){
//console.1og('接收到消息的回调方法’, event.data,JS0N.parse(event.data).caseIumber)
messageCount.value =JSON.parse(event.data).caseNumber
}
// 连接关闭的回调方法
function webSocket0nClose(){
//console.1og('连接关闭的回调方法’);
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常
function webSocketOnBeforeUnload(){
closeWebSocket():
}
//关闭WebSocket连接
function closeWebSocket(){
websocket.value.close()
}
onUnmounted(()=>{
closeWebSocket()
}
onMounted(()=>{
// 创建 websocket 链接
createWebSocket()
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)