首先写一个公共方法 socket.js
functiongetSocket(url, params, callback) {
let socket;
if(typeof(WebSocket) === 'undefined') {
console.log('您的浏览器不支持WebSocket');
} else{
console.log('您的浏览器支持WebSocket');
// 初始化 WebSocket 对象，指定要连接的服务器地址与端口建立连接
socket = newWebSocket(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
};
使用
test.vue
<script>
import {getSocket} from '@/utils/socket.js';
export default{
data() {
return{
wsData: {}, // 保存 websocket 数据对象
form: { // 表单
name: '',
age: ''
}
}
},
beforeDestroy() {
this.wsData.close(); // 关闭 websocket
},
created() {
this.getSocketData();
},
methods: {
// 获取数据
getSocketData() {
let params = this.form;
getSocket(
`ws://path`,
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>
