.NET Core 基于Websocket的在線聊天室實現(xiàn)
什么是Websocket
我們在傳統(tǒng)的客戶端程序要實現(xiàn)實時雙工通訊第一想到的技術就是socket通訊，但是在web體系是用不了socket通訊技術的，因為http被設計成無狀態(tài)，每次跟服務器通訊完成后就會斷開連接。
在沒有websocket之前web系統(tǒng)如果要做雙工通訊往往使用http long polling技術。http long polling 每次往服務器發(fā)送請求后，服務端不會立刻返回信息來結束請求，而是一直掛著直到有數(shù)據(jù)需要返回，或者等待超時了才會返回?？蛻舳嗽诮Y束上一次請求后立刻再發(fā)送一次請求，如此反復。http long polling雖然能實現(xiàn)web系統(tǒng)的雙工通訊，但是有個很大的問題，就是基于http協(xié)議客戶端每次發(fā)送請求都需要攜帶巨大的頭部。在并發(fā)交互少量數(shù)據(jù)的時候非常不劃算，對服務器資源的消耗也是巨大的。
websocket很好的改善了以上問題。它基于tcp重新設計了一套協(xié)議，同時又兼容http，默認跟http一樣使用80/443端口。
websocket鏈接建立本質(zhì)上就是一次http請求，直接使用http協(xié)議的upgrade頭來標識這是一次websocket請求，服務端回復101狀態(tài)碼表示“握手”成功。
//客戶端請求 GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade Host: example.com Origin: http://example.com Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ== Sec-WebSocket-Version: 13 //服務端響應 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s= Sec-WebSocket-Location: ws://example.com/
使用asp.net core來處理websocket
上面我們簡單的了解了websocket，那么如何來使用asp.net core處理websocket呢？因為websocket的握手就是一次http請求，那么我們就可以使用一個middleware來攔截websocket的請求，把建立的鏈接統(tǒng)一進行管理，其實微軟已經(jīng)幫我們簡單的封裝過了。
新建一個asp.net core網(wǎng)站
新建WebsocketHandlerMiddleware中間件
這個中間件就是我們管理websocket鏈接的入口，我們調(diào)用context.WebSockets.AcceptWebSocketAsync()方法把請求轉(zhuǎn)換為websocket鏈接。
在Invoke方法內(nèi)接收websocket鏈接
public async Task Invoke(HttpContext context)
{
if (context.Request.Path == "/ws")
{
if (context.WebSockets.IsWebSocketRequest)
{
WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
string clientId = Guid.NewGuid().ToString(); ;
var wsClient = new WebsocketClient
{
Id = clientId,
WebSocket = webSocket
};
try
{
await Handle(wsClient);
}
catch (Exception ex)
{
_logger.LogError(ex, "Echo websocket client {0} err .", clientId);
await context.Response.WriteAsync("closed");
}
}
else
{
context.Response.StatusCode = 404;
}
}
else
{
await _next(context);
}
}
在Hanle方法等待客戶端的消息
private async Task Handle(WebsocketClient webSocket)
{
WebsocketClientCollection.Add(webSocket);
_logger.LogInformation($"Websocket client added.");
WebSocketReceiveResult result = null;
do
{
var buffer = new byte[1024 * 1];
result = await webSocket.WebSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
if (result.MessageType == WebSocketMessageType.Text && !result.CloseStatus.HasValue)
{
var msgString = Encoding.UTF8.GetString(buffer);
_logger.LogInformation($"Websocket client ReceiveAsync message {msgString}.");
var message = JsonConvert.DeserializeObject<Message>(msgString);
message.SendClientId = webSocket.Id;
MessageRoute(message);
}
}
while (!result.CloseStatus.HasValue);
WebsocketClientCollection.Remove(webSocket);
_logger.LogInformation($"Websocket client closed.");
}
在MessageRoute方法內(nèi)對客戶端的消息進行轉(zhuǎn)發(fā)
對客戶端的消息定義幾個標準的action，對不同的action進行特定的處理，比如加入房間、離開房間、在房間內(nèi)廣播消息等。
private void MessageRoute(Message message)
{
var client = WebsocketClientCollection.Get(message.SendClientId);
switch (message.action)
{
case "join":
client.RoomNo = message.msg;
client.SendMessageAsync($"{message.nick} join room {client.RoomNo} success .");
_logger.LogInformation($"Websocket client {message.SendClientId} join room {client.RoomNo}.");
break;
case "send_to_room":
if (string.IsNullOrEmpty(client.RoomNo))
{
break;
}
var clients = WebsocketClientCollection.GetRoomClients(client.RoomNo);
clients.ForEach(c =>
{
c.SendMessageAsync(message.nick + " : " + message.msg);
});
_logger.LogInformation($"Websocket client {message.SendClientId} send message {message.msg} to room {client.RoomNo}");
break;
case "leave":
var roomNo = client.RoomNo;
client.RoomNo = "";
client.SendMessageAsync($"{message.nick} leave room {roomNo} success .");
_logger.LogInformation($"Websocket client {message.SendClientId} leave room {roomNo}");
break;
default:
break;
}
}
新建WebsocketClientCollection管理類
這個類是個容器，用來存放所有的websocket鏈接，便于統(tǒng)一管理。
public class WebsocketClientCollection
{
private static List<WebsocketClient> _clients = new List<WebsocketClient>();
public static void Add(WebsocketClient client)
{
_clients.Add(client);
}
public static void Remove(WebsocketClient client)
{
_clients.Remove(client);
}
public static WebsocketClient Get(string clientId)
{
var client = _clients.FirstOrDefault(c=>c.Id == clientId);
return client;
}
public static List<WebsocketClient> GetRoomClients(string roomNo)
{
var client = _clients.Where(c => c.RoomNo == roomNo);
return client.ToList();
}
}
在Startup中使用中間件
有了上面的中間件，我們需要use一下。
app.UseWebSockets(new WebSocketOptions
{
KeepAliveInterval = TimeSpan.FromSeconds(60),
ReceiveBufferSize = 1* 1024
});
app.UseMiddleware<WebsocketHandlerMiddleware>();
到此我們的服務端基本完成了，下面進行客戶端html跟JavaScript的編寫。
編寫客戶端界面
修改index.cshtml來實現(xiàn)一個簡單的聊天室ui。
<div style="margin-bottom:5px;"> room no: <input type="text" id="txtRoomNo" value="8888"/> <button id="btnJoin">join room</button> <button id="btnLeave">leave room</button> </div> <div style="margin-bottom:5px;"> nick name: <input type="text" id="txtNickName" value="batman" /> </div> <div style="height:300px;width:600px"> <textarea style="height:100%;width:100%" id="msgList"></textarea> <div style="text-align: right"> <input type="text" id="txtMsg" value="" /> <button id="btnSend">send</button> </div> </div>
使用JavaScript來處理websocket鏈接及消息
現(xiàn)代瀏覽器已經(jīng)都支持websocket協(xié)議，JavaScript運行時內(nèi)置了WebSocket類，我們僅僅需要new一個Websocket對象出來就可以對websocket進行操作。
var server = 'ws://localhost:5000'; //如果開啟了https則這里是wss
var WEB_SOCKET = new WebSocket(server + '/ws');
WEB_SOCKET.onopen = function (evt) {
console.log('Connection open ...');
$('#msgList').val('websocket connection opened .');
};
WEB_SOCKET.onmessage = function (evt) {
console.log('Received Message: ' + evt.data);
if (evt.data) {
var content = $('#msgList').val();
content = content + '\r\n' + evt.data;
$('#msgList').val(content);
}
};
WEB_SOCKET.onclose = function (evt) {
console.log('Connection closed.');
};
$('#btnJoin').on('click', function () {
var roomNo = $('#txtRoomNo').val();
var nick = $('#txtNickName').val();
if (roomNo) {
var msg = {
action: 'join',
msg: roomNo,
nick: nick
};
WEB_SOCKET.send(JSON.stringify(msg));
}
});
$('#btnSend').on('click', function () {
var message = $('#txtMsg').val();
var nick = $('#txtNickName').val();
if (message) {
WEB_SOCKET.send(JSON.stringify({
action: 'send_to_room',
msg: message,
nick: nick
}));
}
});
$('#btnLeave').on('click', function () {
var nick = $('#txtNickName').val();
var msg = {
action: 'leave',
msg: '',
nick: nick
};
WEB_SOCKET.send(JSON.stringify(msg));
});
運行
至此我們的聊天室已經(jīng)搭建完成了，運行一下看看效果。我們啟動兩個頁面，進行聊天。
可以看到我們的消息被實時的轉(zhuǎn)發(fā)出去了，good job ！
源碼
源碼已上傳github
CoreWebsocketChatRoom
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解免費開源的DotNet任務調(diào)度組件Quartz.NET（.NET組件介紹之五）
本篇文章主要介紹免費開源的DotNet任務調(diào)度組件Quartz.NET（.NET組件介紹之五），具有一定參考價值，有興趣的可以了解一下。2016-12-12
Asp.Net Core利用xUnit進行主機級別的網(wǎng)絡集成測試詳解
這篇文章主要給大家介紹了關于Asp.Net Core利用xUnit進行主機級別的網(wǎng)絡集成測試的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們來一起看看吧2018-12-12
Asp.net 對一下XML文檔進行添加刪改的實例2009-12-12
ASP.Net 請求響應流程簡述,需要的朋友可以參考下。2012-01-01
本文主要對AspNetPager.dll這個分頁控件進行介紹，它主要用于asp.net webform網(wǎng)站。文章結尾附上實例下載，有需要的朋友可以看下2016-12-12
深入理解__doPostBack 客戶端調(diào)用服務端事件
__doPostBack是一個純粹并且是非常簡單的javascript函數(shù)，大部分的頁面PostBack都是由它觸發(fā)的。2008-08-08
ASP.NET中的Menu控件的應用及XmlDataSource的了解
以前一直以為菜單都是通過sitemap制作的，最近看到項目中的方法是使用XmlDataSource榜定的,很是好奇，于是研究了一下，感覺還不錯哦，感興趣的朋友也可以了解下啊，或許本文所提供的對你學習有所幫助呢2013-02-02
asp.net 抓取網(wǎng)頁源碼三種實現(xiàn)方法
asp.net 抓取網(wǎng)頁源碼三種實現(xiàn)方法，需要的朋友可以參考一下2013-06-06
WPF數(shù)據(jù)綁定中的RelativeSource屬性
這篇文章介紹了WPF數(shù)據(jù)綁定中的RelativeSource屬性，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
把.net Core 項目遷移到VS2019 for MAC的方法步驟
這篇文章主要介紹了把.net Core 項目遷移到VS2019 for MAC的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03