导读:本期聚焦于小伙伴创作的《C#如何使用WebSocket实现实时双向通信服务端与前端开发》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《C#如何使用WebSocket实现实时双向通信服务端与前端开发》有用,将其分享出去将是对创作者最好的鼓励。

在C#中实现WebSocket实时双向通信,既可以基于原生WebSocket类开发,也可以借助成熟的SignalR框架简化开发流程,两种方式都能实现服务端和前端的实时数据交互,下面分别介绍具体实现方法。

C#如何使用WebSocket实现实时双向通信服务端与前端开发

C#原生WebSocket服务端实现

创建控制台服务端项目

首先新建一个C#控制台应用,引入System.Net.WebSockets命名空间,该命名空间提供了原生WebSocket的实现类,无需额外安装第三方包。

核心服务端代码如下,实现接收客户端消息并回传的功能:

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

namespace WebSocketServer
{
    class Program
    {
        static async Task Main(string[] args)
        {
            // 创建HTTP监听器,WebSocket基于HTTP握手建立连接
            HttpListener listener = new HttpListener();
            // 监听本地8080端口的ws请求
            listener.Prefixes.Add("http://localhost:8080/ws/");
            listener.Start();
            Console.WriteLine("WebSocket服务端已启动,监听地址:http://localhost:8080/ws/");

            while (true)
            {
                // 等待客户端连接请求
                HttpListenerContext context = await listener.GetContextAsync();
                // 判断是否为WebSocket请求
                if (context.Request.IsWebSocketRequest)
                {
                    // 处理WebSocket连接
                    ProcessWebSocketAsync(context);
                }
                else
                {
                    context.Response.StatusCode = 400;
                    context.Response.Close();
                }
            }
        }

        static async Task ProcessWebSocketAsync(HttpListenerContext context)
        {
            WebSocketContext wsContext = await context.AcceptWebSocketAsync(null);
            WebSocket webSocket = wsContext.WebSocket;
            Console.WriteLine("客户端已连接");

            byte[] buffer = new byte[1024];
            try
            {
                while (webSocket.State == WebSocketState.Open)
                {
                    // 接收客户端消息
                    WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
                    string clientMsg = Encoding.UTF8.GetString(buffer, 0, result.Count);
                    Console.WriteLine($"收到客户端消息:{clientMsg}");

                    // 构造回传消息
                    string responseMsg = $"服务端已收到消息:{clientMsg}";
                    byte[] responseBuffer = Encoding.UTF8.GetBytes(responseMsg);
                    // 向客户端发送消息
                    await webSocket.SendAsync(new ArraySegment<byte>(responseBuffer), WebSocketMessageType.Text, true, CancellationToken.None);
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"通信异常:{ex.Message}");
            }
            finally
            {
                if (webSocket.State != WebSocketState.Closed)
                {
                    await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "连接关闭", CancellationToken.None);
                }
                Console.WriteLine("客户端已断开连接");
            }
        }
    }
}

服务端代码说明

上述代码首先通过HttpListener监听指定端口的HTTP请求,当收到WebSocket握手请求时,调用AcceptWebSocketAsync方法完成握手,建立WebSocket连接。之后通过循环接收客户端发送的消息,处理后再回传给客户端,当连接关闭时释放相关资源。

前端WebSocket客户端实现

前端使用原生JavaScript的WebSocket API即可与服务端建立连接,无需引入额外库,代码如下:

// 创建WebSocket连接,地址与服务端监听地址对应
const ws = new WebSocket('ws://localhost:8080/ws/');

// 连接建立成功回调
ws.onopen = function() {
    console.log('WebSocket连接已建立');
    // 连接成功后发送一条测试消息
    ws.send('Hello WebSocket Server');
};

// 接收服务端消息回调
ws.onmessage = function(event) {
    console.log('收到服务端消息:', event.data);
};

// 连接关闭回调
ws.onclose = function() {
    console.log('WebSocket连接已关闭');
};

// 通信错误回调
ws.onerror = function(error) {
    console.error('WebSocket通信错误:', error);
};

// 页面添加发送消息的方法,可绑定到按钮点击事件
function sendMessage() {
    const input = document.getElementById('msgInput');
    const msg = input.value;
    if (msg && ws.readyState === WebSocket.OPEN) {
        ws.send(msg);
        input.value = '';
    }
}

前端的HTML页面只需要添加一个输入框和发送按钮即可配合上述JS代码使用,示例HTML结构如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
</head>
<body>
    <div>
        <input type="text" id="msgInput" placeholder="输入要发送的消息">
        <button onclick="sendMessage()">发送消息</button>
    </div>
    <div id="msgList"></div>
    <script src="client.js"></script>
</body>
</html>

使用SignalR简化开发

如果项目基于ASP.NET Core开发,使用SignalR框架可以更高效地实现WebSocket通信,无需手动处理握手、消息分片等底层逻辑,首先安装Microsoft.AspNetCore.SignalR包。

SignalR服务端实现

创建Hub类作为通信的核心:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRServer
{
    public class ChatHub : Hub
    {
        // 客户端可调用的方法,用于发送消息
        public async Task SendMessage(string user, string message)
        {
            // 将消息广播给所有连接的客户端
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

在Startup或Program类中配置SignalR服务:

var builder = WebApplication.CreateBuilder(args);
// 添加SignalR服务
builder.Services.AddSignalR();
var app = builder.Build();
// 映射Hub路由
app.MapHub<ChatHub>("/chatHub");
app.Run();

SignalR前端实现

前端需要引入SignalR的JS客户端库,然后通过以下代码建立连接:

// 创建SignalR连接
const connection = new signalR.HubConnectionBuilder()
    .withUrl("http://localhost:5000/chatHub")
    .build();

// 接收服务端广播的消息
connection.on("ReceiveMessage", (user, message) => {
    console.log(`${user}说:${message}`);
});

// 启动连接
connection.start().then(() => {
    console.log("SignalR连接已建立");
});

// 发送消息的方法
function sendMsg() {
    const user = document.getElementById("userInput").value;
    const msg = document.getElementById("msgInput").value;
    // 调用服务端的SendMessage方法
    connection.invoke("SendMessage", user, msg).catch(err => console.error(err));
}

开发注意事项

  • 原生WebSocket开发时需要注意消息的分片处理,长消息可能会被拆分成多个帧传输,需要拼接完整后再处理。
  • 生产环境建议为WebSocket服务配置SSL证书,使用wss协议传输数据,避免数据被窃听。
  • 需要做好连接的心跳检测,避免无效连接占用服务端资源,SignalR已经内置了心跳机制,原生开发需要手动实现。
  • 前端连接断开后可以实现自动重连逻辑,提升用户体验。

C#WebSocket实时双向通信SignalR修改时间:2026-07-08 00:09:34

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。