【前端WebSocket的使用（超详细）】

再听七里香

已于 2023-08-07 16:05:51 修改

阅读量6.4k

点赞数 17

文章标签：前端 websocket 网络协议

于 2023-08-07 15:54:46 首次发布

本文链接：https://blog.csdn.net/zhs18331166003/article/details/132147756

版权

1.建立WebSocket连接

const socket = new WebSocket('ws://your-websocket-server-url');

是否需要将WebSocket相关的代码放在单独的文件夹中，取决于你的项目结构和代码组织习惯。在较小的项目中，可以将WebSocket代码直接放在主要的JavaScript文件中。但在更大的项目中，为了更好地组织代码，将WebSocket代码放在单独的文件夹中可能是一个好的做法。

在大型项目中，可以考虑将WebSocket相关的代码放在单独的文件夹中：
WebSocketService.js是一个单独的文件，包含WebSocket相关的代码：

// WebSocketService.js
export const socket = new WebSocket('ws://url');//配置服务器地址

然后在主要的JavaScript文件（例如main.js）中导入并使用WebSocket服务：

// main.js
// main.js
import Vue from 'vue';
import { socket } from './services/WebSocketService';

Vue.prototype.$socket = socket;

new Vue({
  // Vue实例的选项
}).$mount('#app');

在main.js中监听WebSocket连接主要是因为它是Vue.js应用的入口文件。将WebSocket监听放在main.js中可以确保在整个应用程序生命周期内都存在并运行。
主要原因有以下几点：
在main.js中监听WebSocket连接主要是因为它是Vue.js应用的入口文件。将WebSocket监听放在main.js中可以确保在整个应用程序生命周期内都存在并运行。

主要原因有以下几点：

（1）.全局可用性: 将WebSocket监听放在main.js中，确保WebSocket对象在整个应用中是全局可用的。这意味着你可以在任何组件或模块中访问WebSocket对象，并在需要的地方添加事件监听器。

（2）.统一管理: 将WebSocket监听放在单独的文件中（例如WebSocketService.js），然后在main.js中导入，可以使代码更具组织性。这样一来，WebSocket的逻辑不会分散在不同的组件中，更容易维护和更新。

（3）.连接持久性: 在main.js中创建WebSocket连接可以确保连接在整个应用生命周期内持续存在，即使在切换页面或组件时也不会断开连接。这样可以避免频繁建立和关闭连接，节省网络资源。

（4）.全局错误处理: 由于WebSocket可能会出现错误，例如连接失败或数据传输问题，将WebSocket监听放在main.js中可以更容易地实现全局错误处理逻辑。你可以在main.js中添加全局错误处理函数来捕获并处理WebSocket相关的错误，从而提供更好的用户体验。

2.在页面中使用

// 在某个Vue组件中使用WebSocket连接，并监听消息事件
export default {
  created() {
    // 添加WebSocket事件监听器
    this.$socket.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    this.$socket.onmessage = (event) => {
      const message = event.data;
      console.log('Received message:', message);

      // 根据接收到的消息内容来决定要走哪个接口
      if (message === 'interface-1') {
        // 调用接口1的逻辑
        this.callInterface1();
      } else if (message === 'interface-2') {
        // 调用接口2的逻辑
        this.callInterface2();
      }
    };

    this.$socket.onerror = (error) => {
      console.error('WebSocket error:', error);
      // 处理错误
    };

    this.$socket.onclose = () => {
      console.log('WebSocket连接已关闭');
      // 处理连接关闭
    };
  },
  methods: {
    callInterface1() {
      // 执行接口1的相关逻辑
      // ...
    },
    callInterface2() {
      // 执行接口2的相关逻辑
      // ...
    },
  },
};

3.给服务端发送消息

// 在某个Vue组件中
//我们定义了一个sendParamsToServer方法，接受两个参数param1和param2。我们将这两个参数组装成一个对象，并使用JSON.stringify()将对象转换为字符串，然后将这个字符串作为消息发送给服务器。
export default {
  methods: {
    sendParamsToServer(param1, param2) {
      // 将要传递的参数编码为字符串，这里使用JSON格式
      const params = {
        param1: param1,
        param2: param2,
      };
      const message = JSON.stringify(params);

      // 发送数据到服务器
      this.$socket.send(message);
    },
  },
};

当我们在WebSocket通信中发送参数，参数值可能代表着不同的指令或操作类型。以下是一个更清晰的例子

// 假设这部分代码在一个Vue组件中
// 导入WebSocket模块（假设已经建立连接并将WebSocket对象添加到Vue的原型中）
import Vue from 'vue';

export default {
  methods: {
    fetchData() {
      // 发送指令给服务器：获取数据
      this.sendCommandToServer('get-data');
    },
    sendData() {
      // 发送指令给服务器：发送数据
      this.sendCommandToServer('send-data');
    },
    updateData() {
      // 发送指令给服务器：更新数据
      this.sendCommandToServer('update-data');
    },
    sendCommandToServer(command) {
      // 将指令封装为一个对象
      const message = JSON.stringify({
        command: command,
      });

      // 发送数据到服务器
      this.$socket.send(message);
    },
  },
};

当在不同的页面中根据传递的指令执行不同的接口时，可以通过在WebSocket通信中传递额外的参数来实现。这样服务器端就可以根据这些参数来识别不同的指令，从而执行相应的接口逻辑。

//WebSocketComponent.vue
//在这个WebSocketComponent.vue组件中，我们定义了sendCommandToServer方法，该方法接受两个参数：command和data。command参数表示指令，data参数表示附加的数据。我们将这两个参数封装为一个对象，并将这个对象转换为JSON格式的字符串，然后发送给服务器。
<template>
  <!-- 这里可以放置WebSocket相关的代码 -->
</template>

<script>
export default {
  methods: {
    sendCommandToServer(command, data) {
      // 将指令和数据封装为一个对象
      const message = JSON.stringify({
        command: command,
        data: data,
      });

      // 发送数据到服务器
      this.$socket.send(message);
    },
  },
};
</script>

以下是两个示例页面的代码：
Page1.vue：

//Page1.vue：通过引用WebSocketComponent.vue组件，并调用sendCommandToServer方法来发送指令和数据
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <!-- 其他页面1的内容 -->
  </div>
</template>

<script>
import WebSocketComponent from './WebSocketComponent.vue';

export default {
  components: {
    WebSocketComponent,
  },
  methods: {
    fetchData() {
      // 在Page1页面中调用sendCommandToServer方法，发送获取数据的指令，并附带数据
      this.$refs.webSocketComponent.sendCommandToServer('get-data', { type: 'example' });
    },
  },
};
</script>

Page2.vue：

//Page2.vue：在Page1.vue和Page2.vue页面中，我们分别引用了WebSocketComponent.vue组件，并在点击按钮时调用了sendCommandToServer方法。我们分别传递了不同的指令和附带的数据，这样服务器端就可以根据接收到的指令和数据来执行不同的接口逻辑。
<template>
  <div>
    <button @click="sendData">发送数据</button>
    <!-- 其他页面2的内容 -->
  </div>
</template>

<script>
import WebSocketComponent from './WebSocketComponent.vue';

export default {
  components: {
    WebSocketComponent,
  },
  methods: {
    sendData() {
      // 在Page2页面中调用sendCommandToServer方法，发送发送数据的指令，并附带数据
      this.$refs.webSocketComponent.sendCommandToServer('send-data', { value: 42 });
    },
  },
};
</script>