前端连接websocket失败_vue websocket 连接实战及遇到的问题

常规的连接方法

websocket () {

let ws = new WebSocket('ws://localhost:8080')

ws.onopen = () => {

// Web Socket 已连接上，使用 send() 方法发送数据

ws.send('Holle')

console.log('数据发送中...')

}

ws.onmessage = evt => {

// console.log('数据已接收...')

}

ws.onclose = function () {

// 关闭 websocket

console.log('连接已关闭...')

}

// 路由跳转时结束websocket链接

this.$router.afterEach(function () {

ws.close()

})

}

根据上面的方法名字可以知道，上面的函数都是，相对应的回调函数，比如，omopen指的就是连接成功后的回调

具体项目中的完整方法代码

server.js 是请求接口的封装，先实例化了一个websocket的请求，我把websocket的请求封装成了一个公共方法，放在request.js里

import request from './request'

import { wsUrl } from '../../../config'

con