使用 Vue 与 WebSocket 实现实时通信

最新推荐文章于 2025-05-08 20:50:26 发布

codingexpert404

最新推荐文章于 2025-05-08 20:50:26 发布

阅读量827

点赞数 23

文章标签： vue.js websocket 前端

本文链接：https://blog.youkuaiyun.com/codingexpert404/article/details/144860859

版权

在现代 Web 开发中，实时通信功能变得越来越重要，例如实时聊天、协作编辑、实时数据更新等场景，WebSocket 是实现这些功能的常用技术。本文将介绍如何结合 Vue 和 WebSocket，快速实现一个实时通信的功能模块。

什么是 WebSocket？

WebSocket 是一种全双工通信协议，它允许客户端和服务器之间建立持久连接，从而实现实时数据的传输。与传统的 HTTP 轮询相比，WebSocket 更高效，能够显著减少网络开销和延迟。

准备工作

确保你的开发环境已经安装了 Vue CLI 或 Vite。
搭建一个简单的 WebSocket 服务端（本文以 Node.js 为例）。

搭建 WebSocket 服务端

首先，我们使用 Node.js 创建一个简单的 WebSocket 服务端。安装 ws 模块：

npm install ws

创建 server.js 文件：

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  console.log('Client connected');

  // 接收客户端消息
  socket.on('message', (message) => {
    console.log(`Received: ${message}`);
    // 向所有客户端广播消息
    server.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`Server: ${message}`);
      }
    });
  });

  // 处理断开连接
  socket.on('close', () => {
    console.log('Client disconnected');
  });

  // 发送欢迎消息
  socket.send('Welcome to WebSocket server!');
});

console.log('WebSocket server is running on ws://localhost:8080');

运行服务端：

node server.js

在 Vue 中集成 WebSocket

创建 Vue 项目

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目：

vue create vue-websocket-demo

进入项目目录并启动开发服务器：

cd vue-websocket-demo
npm run serve

实现 WebSocket 客户端

在 Vue 项目中，我们可以使用 WebSocket API 实现与服务端的通信。以下是一个简单的实现：

修改 `App.vue`

<template>
  <div id="app">
    <h1>WebSocket 实时通信示例</h1>
    <div>
      <input v-model="message" placeholder="输入消息" @keyup.enter="sendMessage" />
      <button @click="sendMessage">发送</button>
    </div>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      message: "",
      messages: [],
    };
  },
  created() {
    // 初始化 WebSocket
    this.socket = new WebSocket("ws://localhost:8080");

    // 处理 WebSocket 消息
    this.socket.onmessage = (event) => {
      this.messages.push(event.data);
    };

    // 处理连接关闭
    this.socket.onclose = () => {
      this.messages.push("连接已关闭");
    };

    // 处理错误
    this.socket.onerror = (error) => {
      console.error("WebSocket error:", error);
    };
  },
  methods: {
    sendMessage() {
      if (this.message.trim() !== "" && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(this.message);
        this.message = "";
      }
    },
  },
  beforeDestroy() {
    // 关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
    }
  },
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

input {
  margin-right: 10px;
}
</style>

功能演示

启动 WebSocket 服务端。
启动 Vue 开发服务器。
打开浏览器，访问 Vue 应用，输入消息并点击发送按钮。
观察服务端控制台和浏览器页面，消息会实时同步。

代码优化与扩展

1. 封装 WebSocket 服务

将 WebSocket 逻辑封装成服务，便于复用：

// websocketService.js
class WebSocketService {
  constructor(url) {
    this.socket = new WebSocket(url);
  }

  onMessage(callback) {
    this.socket.onmessage = (event) => callback(event.data);
  }

  sendMessage(message) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(message);
    }
  }

  close() {
    this.socket.close();
  }
}

export default WebSocketService;

在组件中使用：

import WebSocketService from "./websocketService";

export default {
  data() {
    return {
      wsService: null,
      message: "",
      messages: [],
    };
  },
  created() {
    this.wsService = new WebSocketService("ws://localhost:8080");
    this.wsService.onMessage((msg) => this.messages.push(msg));
  },
  methods: {
    sendMessage() {
      this.wsService.sendMessage(this.message);
      this.message = "";
    },
  },
  beforeDestroy() {
    this.wsService.close();
  },
};