2025年3月22日 星期六 甲辰(龙)年 月廿一 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > .net

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

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

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连接和消息的收发。通过这样的实现,我们可以在前端和后端之间实现实时的双向通信。

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