您当前的位置:首页 > 计算机 > 编程开发 > .net

WebSocket实现即时通信 前后端代码示例

时间:12-12来源:作者:点击数:

WebSocket是HTML5提供的一种浏览器与服务器进行全双工通信的技术。它允许服务器主动向客户端推送数据,实现实时的双向通信。

WebSocket的主要特点包括:

  • 建立在TCP协议之上,使用HTTP协议进行握手。
  • 可以发送文本或二进制数据。
  • 没有同源限制,可以跨域通信。
  • 协议标识符是ws(如果加密,则为wss),默认端口号是80(如果加密,则为443)。

下面我将分别介绍前端Vue.js和后端c#的实现代码。

前端代码(使用Vue.js):

1、安装Vue.js和WebSocket库:

npm install vue
npm install vue-websocket

2、在Vue组件中引入WebSocket库:

import Vue from 'vue';
import VueWebSocket from 'vue-websocket';

Vue.use(VueWebSocket, 'ws://localhost:8080'); // 替换为实际的WebSocket服务器地址

export default {
  // ...
}

3、在Vue组件中使用WebSocket:

export default {
  // ...
  mounted() {
    this.$socket.addEventListener('open', () => {
      console.log('WebSocket连接已建立');
    });

    this.$socket.addEventListener('message', (event) => {
      console.log('收到消息:', event.data);
    });

    this.$socket.addEventListener('close', () => {
      console.log('WebSocket连接已关闭');
    });
  },
  methods: {
    sendMessage(message) {
      this.$socket.send(message);
    }
  }
}

后端代码(使用C#):

1、创建一个WebSocket处理类:

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

public class WebSocketHandler
{
    private WebSocket _webSocket;

    public async Task Handle(WebSocket webSocket)
    {
        _webSocket = webSocket;

        await ReceiveLoop();
    }

    private async Task ReceiveLoop()
    {
        var buffer = new byte[1024];

        while (_webSocket.State == WebSocketState.Open)
        {
            var result = await _webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);

            if (result.MessageType == WebSocketMessageType.Text)
            {
                var message = Encoding.UTF8.GetString(buffer, 0, result.Count);
                Console.WriteLine("收到消息: " + message);

                // 处理收到的消息,比如广播给所有连接的客户端
                await Broadcast(message);
            }
            else if (result.MessageType == WebSocketMessageType.Close)
            {
                await _webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, string.Empty, CancellationToken.None);
            }
        }
    }

    private async Task Broadcast(string message)
    {
        // 广播给所有连接的客户端
        // 例如,可以遍历所有WebSocket连接,然后调用SendAsync方法发送消息
    }
}

2、创建一个WebSocket中间件:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using System.Net.WebSockets;
using System.Threading.Tasks;

public class WebSocketMiddleware
{
    private readonly RequestDelegate _next;

    public WebSocketMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task Invoke(HttpContext context)
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            var webSocket = await context.WebSockets.AcceptWebSocketAsync();
            var handler = new WebSocketHandler();

            await handler.Handle(webSocket);
        }
        else
        {
            await _next(context);
        }
    }
}

public static class WebSocketMiddlewareExtensions
{
    public static IApplicationBuilder UseWebSocketMiddleware(this IApplicationBuilder builder)
    {
        return builder.UseMiddleware<WebSocketMiddleware>();
    }
}

3、在Startup.cs中注册WebSocket中间件:

public class Startup
{
    // ...

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // ...

        app.UseWebSocketMiddleware();

        // ...
    }
}

以上就是WebSocket即时通信的主要功能的前端和后端代码实现。在前端代码中,我们使用Vue.js和vue-websocket库来建立WebSocket连接,并监听open、message和close事件,以及发送消息。在后端代码中,我们使用C#的WebSocket API来处理WebSocket连接和消息的收发。通过这样的实现,我们可以在前端和后端之间实现实时的双向通信。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门