vue如何使用websocket去接收数据和发送数据

最新推荐文章于 2024-12-13 11:00:32 发布

MingL520

最新推荐文章于 2024-12-13 11:00:32 发布

阅读量1.3k

点赞数 3

分类专栏：前端最新面试题以及日常实用插件文章标签： vue.js websocket 前端

本文链接：https://blog.csdn.net/MingL520/article/details/137541410

版权

前端最新面试题以及日常实用插件专栏收录该内容

44 篇文章 2 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中如何利用原生WebSocket API创建连接和发送消息，并探讨了vue-native-websocket和vue-socket.io这两个库的使用方法，提供更方便的WebSocket操作。

摘要由CSDN通过智能技术生成

原生 WebSocket API

创建 WebSocket 连接

在Vue组件中，你可以使用created或mounted生命周期钩子来创建WebSocket连接。例如：

export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  created() {
    this.socket = new WebSocket('ws://localhost:8765');

    this.socket.onopen = () => {
      console.log('WebSocket connected');
    };

    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };
  },
  methods: {
    sendMessage(message) {
      this.socket.send(message);
    }
  }
};