1.创建 ​​webSocket.js​​文件

getSocket(url, params, callback) => {
let socket;

if (typeof (WebSocket) === 'undefined') {
console.log('您的浏览器不支持WebSocket');
} else {
console.log('您的浏览器支持WebSocket');

// 初始化 WebSocket 对象,指定要连接的服务器地址与端口建立连接
socket = new WebSocket(url);

// 打开事件
socket.onopen = function() {
console.log('Socket 已打开');
socket.send(params);
};

// 获得消息事件
socket.onmessage = function(msg) {
// 发现消息进入, 开始处理前端触发逻辑
callback(msg, socket);
};

// 关闭事件
socket.onclose = function() {
console.log('Socket 已关闭');
};

// 发生了错误事件
socket.onerror = function() {
console.log('Socket 发生了错误,请刷新页面');
// 此时可以尝试刷新页面
};
}
}

export {
getSocket
};

2.调用​​webSocket.js​

<script>
import { getSocket } from './webSocket'
export default {
data(){
return{
// webscok
wsData: [], // 保存 websocket 数据对象
form: {
// 表单
name: '',
age: ''
}
},
created() {
this.getSocketData() // 开启webSocket
},
destroyed() {
this.wsData.close(); // 关闭 websocket
},
methods: {
获取数据
getSocketData() {
let params = this.form;
getSocket(
`ws://192.168.2.115:8004/webSocket/${window.sessionStorage.getItem("currentId")}`,
// `ws://121.40.165.18:8800`,
JSON.stringify(params),
(data, ws) => {
console.log(data, ws);

// 保存数据对象, 以便发送消息
this.wsData = ws;
}
);
},

// 发送数据
sendSocketData() {
let params = this.form;

params.name = 'xx';
params.age = '18';
this.wsData.send(JSON.stringify(params));
}
}
}
</script>