用户投稿使用:.NET 6
后端为:Web API
想做聊天室，就必须透过WebSocket来通讯，
WebSocket 的流程 请参考Web Scoket 流程，
这里只讲实作。
[后端]
1.建立专案
档案>建立新专案>ASP.NET Core Web API(下一步)>输入专案名称(下一步)
架构选择 .NET 6(建立)
2.建立Controller
=>右侧方案总管选择Controller 资料夹(右键)>新增控制项>在此命名为(WebSocketController)
(1)在这里新增一个Get 请求，这个Get是当发送传输入 localhost:xxxx/ws 就会进入这个Method，
并检查是否为WebScoket请求，如果是则进入Echo。
(2)Echo
=>判断是否为WebSocket的等待请求项目，
如果是则会发请一个等待请求，以便接收client 来源的资料，
接收到了来源资料后检查连线。
(3)发送资料至前端。
(4)接着等待接收资料。
(5)重複2-4
(6)如果连线中断则关闭等待请求
public class WebSocketController : Controller { [HttpGet("/ws")] public async Task Get() { //是否为webSocket请求 如果是则加入等待 if (HttpContext.WebSockets.IsWebSocketRequest) { using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync(); await Echo(webSocket); } else { HttpContext.Response.StatusCode = StatusCodes.Status400BadRequest; } } private static async Task Echo(WebSocket webSocket) { var buffer = new byte[1024 * 4]; //等待接收讯息 var receiveResult = await webSocket.ReceiveAsync( new ArraySegment<byte>(buffer), CancellationToken.None); //检查是否为连线状态 while (!receiveResult.CloseStatus.HasValue) { //讯息发到前端 await webSocket.SendAsync( new ArraySegment<byte>(buffer, 0, receiveResult.Count), receiveResult.MessageType, receiveResult.EndOfMessage, CancellationToken.None ); //继续等待接收讯息 receiveResult = await webSocket.ReceiveAsync( new ArraySegment<byte>(buffer), CancellationToken.None); } //关闭连线 await webSocket.CloseAsync( receiveResult.CloseStatus.Value, receiveResult.CloseStatusDescription, CancellationToken.None); } }3.找到Program.cs 并增加注入设定
在var app = builder.Build(); 的后面增加如下程式码
//注册webSocketvar webSocketOptions = new WebSocketOptions{ //Proxy 保持连线开启的频率。 预设为两分钟 KeepAliveInterval = TimeSpan.FromMinutes(2) //WebSocket 要求之允许 Origin 标头值的清单 //AllowedOrigins };app.UseWebSockets(webSocketOptions);至此后端就完成了。
可以开启Postam测试
[前端]
直接来完整程式，注解都在里面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <br/> <span>name</span><input type="text" id="txtName"/> <br/> <span>Msg</span><input type="text" id="txtMsg"/> <br/> <button id="btnSend">send</button> <br/> <label id="lbMsg"> </label></head><body> <script> var server = 'wss://localhost:7070'; //如果开启了https则这里是wss var vWebSocket=null; window.onload = function () { //建立一个web socket 连线 vWebSocket=new WebSocket(server+'/ws'); document.getElementById("btnSend").addEventListener("click", sendMsg); //如果连线成功 vWebSocket.onopen=function(e){ console.log('connection start ...'); var content=document.getElementById("lbMsg"); content.innerText=content.innerText+'\r\n'+"conection....."; } //接收到讯息时 vWebSocket.onmessage=function(e){ console.log('Recevied Message:'+e.data); if(e.data){ var content=document.getElementById("lbMsg"); content.innerText=content.innerText+'\r\n'+e.data; } } //关闭连线时 vWebSocket.onclose=function(e){ console.log("connection closed"); } }; function sendMsg() { var txtName=document.getElementById("txtName").value; var txtMsg=document.getElementById("txtMsg").value; if (txtName) { var data = { action: 'sendMsg', name: txtName, msg: txtMsg }; vWebSocket.send(JSON.stringify(data)); } } </script></body></html>Git完整程式码
参考:https://www.cnblogs.com/kklldog/p/core-for-websocket.html
参考:https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-6.0
微信扫一扫打赏
支付宝扫一扫打赏
