vue websocket

在 Vue 组件中创建 WebSocket 连接

提示：在 Vue 2.0 中使用原生的WebSocket对象来与后端进行通信，并传递指定参数 vue2.0 + Socket.io vue2.0 + vuenativeock vue2.0 + Stomp.js + Sock.js

一、原生的WebSocket对象

<template>
  <!-- 这里可以放置用来展示接收到的数据或者相关交互的DOM元素 -->
</template>

<script>
export default {
  data() {
    return {
      socket: null // 用于存放WebSocket实例
    };
  },
  mounted() {
    // 创建WebSocket连接，替换为后端真实提供的路径
    this.socket = new WebSocket('ws://127.0.0.1:8848/autoDeploy');
    this.socket.onopen = this.onSocketOpen;
    this.socket.onmessage = this.onSocketMessage;
    this.socket.onclose = this.onSocketClose;
    this.socket.onerror = this.onSocketError;
  },
  methods: {
    onSocketOpen() {
      console.log('WebSocket连接已打开');
      // 连接成功后可以在这里发送参数给后端，调用发送数据的方法
      this.sendParams();
    },
    onSocketMessage(event) {
      const data = event.data;
      console.log('接收到服务器消息:', data);
      // 在这里对接收到的数据进行后续处理，比如更新组件中的数据用于界面展示等
    },
    onSocketClose(event) {
      console.log('WebSocket连接已关闭', event);
    },
    onSocketError(error) {
      console.log('WebSocket连接出错', error);
    },
    sendParams() {
      const params = {
       type：'/api',
       query:{
      	 Name: 'aaa',
      	 id:1
       }
      };
      this.socket.send(JSON.stringify(params));
    }
  }
};
</script>

解释各部分代码的作用:

创建 WebSocket 实例：

this.socket = new WebSocket('ws://127.0.0.1:8848/autoDeploy'); 
// 这行代码创建了一个WebSocket连接对象，注意这里的协议要写成ws（如果是加密的则是wss），指向后端提供的路径。

监听事件：

onopen事件在 WebSocket 连接成功建立时触发，这里在连接成功后调用了sendParams方法来发送参数给后端。
onmessage事件会在服务器发送消息过来时触发，在对应的回调函数里可以对接收到的数据进行处理，比如展示到页面上或者进行其他业务逻辑操作。
onclose事件在连接关闭时触发，方便进行一些清理或者提示用户等相关操作。
onerror事件在连接出现错误时触发，便于记录错误信息等排查问题。

发送参数方法：

sendParams方法里，先构造了包含需要传递的参数params 的对象，其中 type 定义的的是后端对应’/api’接口（这个需要和后端自定义），query传值是’/api’接口需要的参数;

然后通过JSON.stringify将其转换为字符串（因为WebSocket的send方法要求发送的数据格式为字符串类型），再使用this.socket.send发送给后端服务器。

二. vue+ Socket.io

简介

Socket.io 是一个流行的 JavaScript 库，它构建在 WebSocket 协议之上，提供了跨浏览器兼容性和额外的功能。它可以在服务器和客户端之间实现实时、双向通信。

在 Vue 中的使用步骤

npm install axios

<template>
  <div>
    <button @click="sendData">发送数据到后端</button>
  </div>
</template>

<script>
import io from 'socket.io-client';
import axios from 'axios';

export default {
  data() {
    return {
      socket: null
    };
  },
  mounted() {
    // 创建Socket.io连接
    this.socket = io('ws://127.0.0.1:8848/autoDeploy');
    this.socket.on('connect', () => {
      console.log('已成功连接到Socket.io服务器');
    });
    this.socket.on('disconnect', () => {
      console.log('与Socket.io服务器断开连接');
    });
  },
  methods: {
    sendData() {
      const data = {
        name: 'aaa',
        id: 1
      };
      // 这里先使用Socket.io发送一个消息告知后端即将有请求过来（可选步骤，看具体业务逻辑需求）
      this.socket.emit('before-api-request', data);

      // 使用Axios发起HTTP请求到后端的/api接口
      axios.post('http://127.0.0.1:8848/api', data)
       .then(response => {
          console.log('后端接口响应:', response.data);
          // 可以在这里根据响应结果做进一步处理，比如更新组件的数据等
          this.handleResponse(response.data);
        })
       .catch(error => {
          console.error('请求后端接口出错:', error);
        });
    },
    handleResponse(responseData) {
      // 具体处理后端响应数据的逻辑，这里可以根据实际需求编写代码
      console.log('处理后端响应数据:', responseData);
    }
  }
};
</script>

<style scoped>

</style>

解释各部分代码的作用:

连接 Socket.io 服务器：

在mounted生命周期函数中，通过io(‘ws://127.0.0.1:8848/autoDeploy’)创建了与指定地址的 Socket.io 服务器的连接。
同时监听了connect和disconnect事件，以便在连接建立和断开时进行相应的日志记录等操作。

发送数据到后端：

在sendData方法中，首先构造了要发送给后端的数据对象，包含name为aaa和id为1这两个参数。
然后可以选择先通过 Socket.io 的emit方法发送一个自定义的消息（如before-api-request）告知后端即将有 HTTP 请求过来，这一步是可选的，具体取决于你的业务逻辑需求。
接着使用 Axios 的post方法向http://127.0.0.1:8848/api这个后端接口发送 POST 请求，并在请求成功（.then）和失败（.catch）时分别进行相应的处理，比如打印响应数据或者错误信息等，并且在请求成功时还调用了handleResponse方法来进一步处理后端返回的实际业务数据。

需要注意的是：

确保后端的 Socket.io 服务器以及对应的/api接口服务正常运行，并且后端对于跨域等情况有合适的处理（如果前端和后端不在同一个域名下，可能需要配置跨域相关设置）。

三 . vue 2.0 + VueNativeSock

在 Vue 中的使用步骤

安装vue-native-sock包

npm install vue-native-sock

在main.js（项目入口文件）中配置VueNativeSock插件

import Vue from 'vue';
import VueNativeSock from 'vue-native-sock';

Vue.use(VueNativeSock, 'ws://127.0.0.1:8848/autoDeploy', {
    // 可以配置一些选项，比如格式等，以下是示例配置，可按需调整
    format: 'json'
});

new Vue({
    el: '#app',
    render: h => h(App)
});

在上述代码中，通过Vue.use()方法来注册VueNativeSock插件，传入 WebSocket 服务器的地址ws://127.0.0.1:8848/autoDeploy以及可选的配置对象（这里配置了消息格式为json，如果后端期望接收和发送的消息是 JSON 格式的话，这样配置会比较方便后续处理，你可以根据实际情况调整配置内容）

在 Vue 组件中使用VueNativeSock来与后端交互并调用/api接口（以下示例代码假设放在src/components目录下名为MyComponent.vue的文件中）

<template>
  <div>
    <button @click="sendDataToBackend">发送数据到后端</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 可以在这里定义一些用于存储数据的属性，比如接收后端消息等情况
            receivedMessages: []
        };
    },
    mounted() {
        // 监听来自WebSocket服务器的消息
        this.$socket.on('message', (data) => {
            console.log('收到WebSocket消息:', data);
            this.receivedMessages.push(data);
        });
    },
    methods: {
        sendDataToBackend() {
            const data = {
                name: 'aaa',
                id: 1
            };
            // 通过WebSocket发送消息（这里只是示例发送消息告知后端，具体消息内容和逻辑可按需调整）
            this.$socket.send(data);

            // 使用Axios发起HTTP请求调用后端的/api接口
            this.$axios.post('http://127.0.0.1:8848/api', data)
               .then((response) => {
                    console.log('后端 /api 接口响应:', response.data);
                    // 可以根据响应结果更新组件的数据等操作，比如展示给用户等
                    this.handleResponse(response.data);
                })
               .catch((error) => {
                    console.error('调用后端 /api 接口出错:', error);
                });
        },
        handleResponse(responseData) {
            // 在这里编写具体处理后端响应数据的逻辑，例如更新界面显示等
            console.log('处理后端响应数据:', responseData);
        }
    }
};
</script>

<style scoped>

</style>

解释各部分代码的作用:

接收 WebSocket 消息

在mounted生命周期函数中，通过this.$socket.on(‘message’,…)监听来自 WebSocket 服务器发送的消息，每当收到消息时，会将消息打印出来并添加到receivedMessages数组中（你可以根据实际需求对收到的消息做更多处理，比如根据消息类型进行不同的界面更新等操作）。

发送数据到后端：

sendDataToBackend方法中，首先构造了要发送给后端的参数对象，包含name为aaa和id为1的参数。
接着通过this.$socket.send(data)先通过 WebSocket 发送消息给后端（这里发送消息的具体用途可以根据实际业务逻辑来定，比如告知后端前端即将发起一个/api接口的调用等）。
然后使用this.$axios（因为在main.js中配置了VueNativeSock后，axios会被挂载到Vue实例上，方便使用）发起 POST 请求到后端的/api接口，并在请求成功和失败时分别进行相应的处理，如打印响应数据、错误信息等，同时在请求成功时调用handleResponse方法进一步处理后端返回的业务相关数据。

使用该组件
比如在src/App.vue文件中引入并使用MyComponent.vue组件，示例如下：


<template>
  <div id="app">
    <MyComponent></MyComponent>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

需要注意的几点：

确保后端的 WebSocket 服务器以及对应的/api接口服务都正常运行，并且后端对于跨域等情况（如果存在前端和后端不同域的情况）有合适的处理措施。
根据实际的业务场景，可能需要进一步完善代码逻辑，比如对于 WebSocket 连接异常的处理、对后端/api接口返回数据更复杂的展示和处理逻辑等。

四. vue + Stomp.js + SockJS

安装相关依赖包

npm install stompjs sockjs-client

在 Vue 组件中使用Stomp.js和SockJS（以下示例代码假设放在src/components目录下名为MyComponent.vue的文件中）

<template>
  <div>
    <button @click="sendDataToBackend">发送数据到后端</button>
  </div>
</template>

<script>
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import axios from 'axios';

export default {
    data() {
        return {
            stompClient: null,
            receivedMessages: []
        };
    },
    mounted() {
        // 创建SockJS连接对象
        const socket = new SockJS('http://127.0.0.1:8848/autoDeploy');
        // 通过Stomp协议包装SockJS连接
        this.stompClient = Stomp.over(socket);

        // 连接到Stomp服务器
        this.stompClient.connect({}, () => {
            console.log('已成功连接到Stomp服务器');

            // 订阅消息主题（这里的主题名称可根据实际后端定义来修改）
            this.stompClient.subscribe('/topic/messages', (message) => {
                console.log('收到Stomp消息:', message.body);
                this.receivedMessages.push(message.body);
            });
        }, (error) => {
            console.error('连接Stomp服务器出错:', error);
        });
    },
    methods: {
        sendDataToBackend() {
            const data = {
                name: 'aaa',
                id: 1
            };

            // 先通过Stomp发送消息（示例，可根据实际业务调整）
            if (this.stompClient) {
                this.stompClient.send('/app/send-message', {}, JSON.stringify(data));
            }

            // 使用Axios发起HTTP请求调用后端的/api接口
            axios.post('http://127.0.0.1:8848/api', data)
              .then((response) => {
                    console.log('后端 /api 接口响应:', response.data);
                    this.handleResponse(response.data);
                })
              .catch((error) => {
                    console.error('调用后端 /api 接口出错:', error);
                });
        },
        handleResponse(responseData) {
            // 处理后端响应数据的逻辑，比如更新组件数据展示等
            console.log('处理后端响应数据:', responseData);
        }
    }
};
</script>

<style scoped>

</style>

解释上述代码

建立连接

在mounted生命周期函数中，首先通过new SockJS(‘http://127.0.0.1:8848/autoDeploy’)创建了一个类似 WebSocket 的连接对象（SockJS会在不支持 WebSocket 的浏览器中自动切换到其他兼容的传输方式来模拟 WebSocket 功能）。
然后使用Stomp.over(socket)基于这个连接对象创建了Stomp客户端实例stompClient。
接着通过connect方法尝试连接到Stomp服务器，在连接成功的回调函数中，订阅了一个名为/topic/messages的消息主题（这里的主题名称要和后端配置的一致，以便能正确接收后端推送的消息），每当收到消息时，会将消息内容打印出来并添加到receivedMessages数组中。同时，如果连接出现错误，会在connect方法的第二个参数（错误回调函数）中打印出错误信息。

发送数据到后端

在sendDataToBackend方法中，先构造了要发送给后端的参数对象，包含name为aaa和id为1的参数。
然后通过stompClient.send方法向/app/send-message这个端点（同样要和后端定义的发送端点一致）发送消息，这里使用JSON.stringify将数据转换为 JSON 字符串发送（具体格式也需要和后端约定好），这一步是通过Stomp协议发送消息，可根据业务需求来决定发送的时机和内容，比如告知后端前端即将发起/api接口调用等情况。
最后使用axios的post方法发起 POST 请求到后端的/api接口，并在请求成功和失败时分别进行相应的处理，如打印响应数据、错误信息等，在请求成功时还调用了handleResponse方法进一步处理后端返回的业务相关数据。

使用该组件
例如在src/App.vue文件中引入并使用MyComponent.vue组件，示例如下：

<template>
  <div id="app">
    <MyComponent></MyComponent>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

需要注意的事项如下：

确保后端的服务器正确配置了SockJS和Stomp相关服务，并且定义好了对应的消息主题、发送端点等内容，使其能和前端代码配合进行消息的收发。
要留意跨域问题，如果前端和后端不在同一个域名下，后端需要做好跨域相关的配置，否则可能会出现请求失败的情况。
根据实际的业务场景，可以进一步完善代码逻辑，比如对更多不同类型消息的处理、对Stomp连接状态变化（如重连等情况）的应对等。