Vue3 与 C# WebSocket 实战：轻松搭建实时通讯应用-51CTO.COM

嘿，各位前端和后端的小伙伴们！今天咱们来聊聊 Vue3 和 C# 如何携手合作，通过 WebSocket 实现实时通讯。想象一下，你的网页能够即时响应服务器的数据变化，是不是超级酷？别担心，即使你是 WebSocket 的新手，我也会用最简单、最口语化的方式，带你一步步实现这个功能。

一、WebSocket 简介

首先，咱们得了解一下 WebSocket 是什么。WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它使得客户端和服务器之间的数据交换变得更加简单，减少了不必要的网络请求和延迟。简单来说，就是客户端和服务器可以互相“推”数据，而不仅仅是客户端“拉”数据。

二、Vue3 前端准备

咱们先来看看 Vue3 前端部分怎么实现。

(1) 创建 Vue3

项目如果你还没有 Vue3 项目，可以用 Vue CLI 快速创建一个：

npm install -g @vue/cli
vue create my-websocket-app
cd my-websocket-app
npm run serve
1.
2.
3.
4.

(2) 安装 WebSocket 客户端库（可选）

虽然 Vue3 本身不直接提供 WebSocket 支持，但你可以使用原生的 WebSocket API，或者安装一个更高级的库，比如 reconnecting-websocket。不过，为了简单起见，咱们先用原生的。

(3) 实现 WebSocket 连接

在 Vue3 组件中，你可以这样实现 WebSocket 连接：

<template>
  <div>
    <h1>WebSocket Demo</h1>
    <div v-for="message in messages" :key="message.id">
      {{ message.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  mounted() {
    // 建立 WebSocket 连接
    this.socket = new WebSocket('ws://localhost:5000');

    // 处理连接打开事件
    this.socket.onopen = () => {
      console.log('WebSocket 连接已打开');
      // 可以发送消息给服务器
      this.socket.send('Hello, Server!');
    };

    // 处理接收消息事件
    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    };

    // 处理连接关闭事件
    this.socket.onclose = () => {
      console.log('WebSocket 连接已关闭');
    };

    // 处理连接错误事件
    this.socket.onerror = (error) => {
      console.error('WebSocket 错误:', error);
    };
  },
  beforeUnmount() {
    // 组件销毁前关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
    }
  }
};
</script>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.

三、C# 后端准备

接下来，咱们来看看 C# 后端部分怎么实现。

(1) 创建 ASP.NET Core 项目

如果你还没有 ASP.NET Core 项目，可以用 .NET CLI 快速创建一个：

dotnet new web -n MyWebSocketApp
cd MyWebSocketApp
dotnet run1.
2.
3.

(2) 配置 WebSocket 中间件

在Startup.cs文件中，配置 WebSocket 中间件：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapGet("/", async context =>
        {
            await context.Response.WriteAsync("Hello, World!");
        });

        // 配置 WebSocket 路由
        endpoints.MapWebSockets("/ws", new WebSocketHandler());
    });
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

(3) 实现 WebSocket 处理器

创建一个新的类WebSocketHandler来处理 WebSocket 请求：

using Microsoft.AspNetCore.WebSockets;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

public class WebSocketHandler
{
    public async Task InvokeAsync(HttpContext context, WebSocket webSocket)
    {
        if (webSocket.State == WebSocketState.Open)
        {
            // 接收客户端消息
            var buffer = new byte[1024 * 4];
            WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            while (!result.CloseStatus.HasValue)
            {
                var message = Encoding.UTF8.GetString(buffer, 0, result.Count);
                Console.WriteLine($"收到消息: {message}");

                // 发送响应消息给客户端
                var response = new { Content = "Hello, Client!", Id = DateTime.Now.Ticks };
                var responseBytes = Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(response));
                await webSocket.SendAsync(new ArraySegment<byte>(responseBytes), result.MessageType, result.EndOfMessage, CancellationToken.None);

                result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
            }

            await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
        }
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

注意：这里用到了 JsonConvert.SerializeObject 来序列化对象，所以你需要安装 Newtonsoft.Json 包：

dotnet add package Newtonsoft.Json1.

四、运行测试

现在，你已经完成了前端和后端的代码。接下来，咱们来运行一下，看看效果。

(1) 运行后端

首先，运行你的 ASP.NET Core 项目：

dotnet run1.

(2) 运行前端

然后，运行你的 Vue3 项目：

npm run serve1.

(3) 观察结果

打开浏览器，访问你的 Vue3 应用。你应该能看到页面上显示从服务器接收到的消息。同时，你可以在控制台中看到 WebSocket 连接的状态和消息传递的日志。

五、总结

通过以上的步骤，你已经成功实现了 Vue3 和 C# WebSocket 的实时通讯。前端 Vue3 组件通过 WebSocket 与后端 ASP.NET Core 服务器进行通信，实时接收和显示服务器的消息。

这只是一个基本的实现，你可以在此基础上进行扩展和优化，比如增加消息类型处理、用户身份验证、错误处理等。希望这篇文章对你有所帮助，祝你开发愉快！