首先写一个公共方法
socket.JS
- function 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
- };
使用
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>
来源: http://www.jianshu.com/p/22f8158088d9