WebSocket是HTML5提供的一种浏览器与服务器进行全双工通信的技术。它允许服务器主动向客户端推送数据,实现实时的双向通信。
WebSocket的主要特点包括:
下面我将分别介绍前端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连接和消息的收发。通过这样的实现,我们可以在前端和后端之间实现实时的双向通信。