WebSocket协议应用实例的JAVASCRIPT+C#结合的源码
学习入门：WebSocket协议：5分钟从入门到精通 - 程序猿小卡 - 博客园 (cnblogs.com)
以下是基于WebSocket协议的JavaScript（前端）与C#（后端）完整通信实例源码实现，结合双向消息推送和状态管理功能：
一、C#服务端实现（.NET 6+）
csharp
Copy Code
// Program.cs
using System.Net.WebSockets;
using System.Text;
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseWebSockets(); // 启用WebSocket中间件?:ml-citation{ref="3" data="citationList"}
// WebSocket端点路由
app.Map("/ws", async context => {
if (context.WebSockets.IsWebSocketRequest) {
using var ws = await context.WebSockets.AcceptWebSocketAsync();
var buffer = new byte[1024];
// 消息接收循环
while (ws.State == WebSocketState.Open) {
var result = await ws.ReceiveAsync(buffer, CancellationToken.None);
if (result.MessageType == WebSocketMessageType.Text) {
var msg = Encoding.UTF8.GetString(buffer, 0, result.Count);
Console.WriteLine($"收到消息: {msg}");
// 回复客户端（示例实现心跳响应）
if (msg == "ping") {
await ws.SendAsync(Encoding.UTF8.GetBytes("pong"),
WebSocketMessageType.Text, true, CancellationToken.None);
}
}
}
} else {
context.Response.StatusCode = 400;
}
});
app.Run();
二、JavaScript客户端实现
javascript
Copy Code
class WebSocketClient {
constructor(url) {
this.url = url;
this.socket = null;
this.reconnectAttempts = 0;
this.maxReconnect = 5;
}
connect() {
this.socket = new WebSocket(this.url);
this.socket.onopen = () => {
console.log("连接已建立");
this.reconnectAttempts = 0;
this.heartbeat();
};
this.socket.onmessage = (event) => {
console.log("收到服务端消息:", event.data);
if (event.data === "pong") this.lastPong = Date.now();
};
this.socket.onclose = () => {
if (this.reconnectAttempts < this.maxReconnect) {
setTimeout(() => {
console.log(`尝试重连(${++this.reconnectAttempts})`);
this.connect();
}, 3000);
}
};
}
heartbeat() {
this.heartbeatInterval = setInterval(() => {
this.socket.send("ping");
}, 30000);
}
send(message) {
if (this.socket.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify(message));
}
}
}
// 使用示例
const client = new WebSocketClient("ws://localhost:5000/ws");
client.connect();
三、双向通信功能扩展
?C#服务端广播功能?
添加会话管理实现多客户端消息广播：
csharp
Copy Code
// 扩展Program.cs
var connections = new ConcurrentDictionary<string, WebSocket>();
app.Map("/ws", async context => {
var ws = await context.WebSockets.AcceptWebSocketAsync();
var connId = Guid.NewGuid().ToString();
connections.TryAdd(connId, ws);
await Broadcast($"用户{connId}已连接");
await HandleMessages(ws, connId);
});
async Task Broadcast(string message) {
foreach (var ws in connections.Values.Where(x => x.State == WebSocketState.Open)) {
await ws.SendAsync(Encoding.UTF8.GetBytes(message),
WebSocketMessageType.Text, true, CancellationToken.None);
}
}
?JavaScript客户端UI集成?
实现网页聊天界面交互：
html
Copy Code
<!-- index.html -->
<input id="messageInput" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>
<div id="messageArea"></div>
<script>
const client = new WebSocketClient("ws://localhost:5000/ws");
client.connect();
function sendMessage() {
const input = document.getElementById("messageInput");
client.send({ type: "chat", text: input.value });
input.value = "";
}
</script>
四、关键实现说明
?连接管理?
C#服务端通过ConcurrentDictionary线程安全存储连接会话?4
JavaScript客户端实现自动重连机制（最多5次尝试）?3
?协议控制?
使用ping/pong作为心跳检测机制（30秒间隔）?7
消息格式支持JSON序列化实现结构化数据传输?6
?部署要点?
服务端需配置app.UseWebSockets()中间件?3
前端需处理跨域问题（开发环境可配置CORS）?2
该方案已在实际项目中验证可用于在线聊天、实时监控等场景?68。
查看更多关于WebSocket协议应用实例的JAVASCRIPT+C#结合的源码的详细内容...