製作NetCore WebSocket即時通訊實例詳解-C#.Net教程-PHP中文網

製作NetCore WebSocket即時通訊實例詳解

巴扎黑

發布： 2017-08-08 11:23:49

原創

5020 人瀏覽過

這篇文章主要為大家詳細介紹了NetCore WebSocket即時通訊範例，具有一定的參考價值，有興趣的小夥伴們可以參考一下

NetCore WebSocket 即時通訊範例，供大家參考，具體內容如下

1.新Netcore Web專案

#2.建立簡易通訊協定

public class MsgTemplate
 {
 public string SenderID { get; set; }
 public string ReceiverID { get; set; }
 public string MessageType { get; set; }
 public string Content { get; set; }
 }

登入後複製

SenderID傳送者ID

ReceiverID 接受者ID

MessageType 訊息類型 Text Voice 等等

Content 訊息內容

#3.新增中間件ChatWebSocketMiddleware

public class ChatWebSocketMiddleware
 {
 private static ConcurrentDictionary _sockets = new ConcurrentDictionary();

 private readonly RequestDelegate _next;

 public ChatWebSocketMiddleware(RequestDelegate next)
 {
  _next = next;
 }

 public async Task Invoke(HttpContext context)
 {
  if (!context.WebSockets.IsWebSocketRequest)
  {
  await _next.Invoke(context);
  return;
  }
  System.Net.WebSockets.WebSocket dummy;

  CancellationToken ct = context.RequestAborted;
  var currentSocket = await context.WebSockets.AcceptWebSocketAsync();
  //string socketId = Guid.NewGuid().ToString();
  string socketId = context.Request.Query["sid"].ToString();
  if (!_sockets.ContainsKey(socketId))
  {
  _sockets.TryAdd(socketId, currentSocket);
  }
  //_sockets.TryRemove(socketId, out dummy);
  //_sockets.TryAdd(socketId, currentSocket);

  while (true)
  {
  if (ct.IsCancellationRequested)
  {
   break;
  }

  string response = await ReceiveStringAsync(currentSocket, ct);
  MsgTemplate msg = JsonConvert.DeserializeObject(response);

  if (string.IsNullOrEmpty(response))
  {
   if (currentSocket.State != WebSocketState.Open)
   {
   break;
   }

   continue;
  }

  foreach (var socket in _sockets)
  {
   if (socket.Value.State != WebSocketState.Open)
   {
   continue;
   }
   if (socket.Key == msg.ReceiverID || socket.Key == socketId)
   {
   await SendStringAsync(socket.Value, JsonConvert.SerializeObject(msg), ct);
   }
  }
  }

  //_sockets.TryRemove(socketId, out dummy);

  await currentSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closing", ct);
  currentSocket.Dispose();
 }

 private static Task SendStringAsync(System.Net.WebSockets.WebSocket socket, string data, CancellationToken ct = default(CancellationToken))
 {
  var buffer = Encoding.UTF8.GetBytes(data);
  var segment = new ArraySegment(buffer);
  return socket.SendAsync(segment, WebSocketMessageType.Text, true, ct);
 }

 private static async Task ReceiveStringAsync(System.Net.WebSockets.WebSocket socket, CancellationToken ct = default(CancellationToken))
 {
  var buffer = new ArraySegment(new byte[8192]);
  using (var ms = new MemoryStream())
  {
  WebSocketReceiveResult result;
  do
  {
   ct.ThrowIfCancellationRequested();

   result = await socket.ReceiveAsync(buffer, ct);
   ms.Write(buffer.Array, buffer.Offset, result.Count);
  }
  while (!result.EndOfMessage);

  ms.Seek(0, SeekOrigin.Begin);
  if (result.MessageType != WebSocketMessageType.Text)
  {
   return null;
  }

  using (var reader = new StreamReader(ms, Encoding.UTF8))
  {
   return await reader.ReadToEndAsync();
  }
  }
 }
 }

登入後複製

控制只有接收者才能收到訊息

if (socket.Key == msg.ReceiverID || socket.Key == socketId)
{
 await SendStringAsync(socket.Value,JsonConvert.SerializeObject(msg), ct);
}

登入後複製

4.在Startup.cs中使用中間件

app.UseWebSockets();
app.UseMiddleware();

登入後複製

5.建立行動端測試範例這裡採用Ionic3運行在web端

建立ionic3專案略過新手可點這裡查看或有Angular2/4專案竟然可直接往下看

(1) 啟動Ionic專案

當初建立ionic3專案時候遇到不少問題

例如ionic-cli初始化專案失敗切換到預設npmorg來源就好了

例如ionic serve失敗打開代理允許FQ就好了

啟動後介面是這樣式的

(2) 建立聊天視窗dialog 具體佈局實作模組載入略過直接進入websocket實作

在這之前別忘了啟動web專案否則會出現這樣情況連結不到服務

(3)dialog.ts具體實作

export class Dialog {

 private ws: any;
 private msgArr: Array;

 constructor(private httpService: HttpService) {

 this.msgArr = [];
 }

 ionViewDidEnter() {
 if (!this.ws) {
  this.ws = new WebSocket("ws://localhost:56892?sid=222");

  this.ws.onopen = () => {
  console.log('open');
  };

  this.ws.onmessage = (event) => {
  console.log('new message: ' + event.data);
  var msgObj = JSON.parse(event.data);
  this.msgArr.push(msgObj);;
  };

  this.ws.onerror = () => {
  console.log('error occurred!');
  };

  this.ws.onclose = (event) => {
  console.log('close code=' + event.code);
  };
 }
 }

 sendMsg(msg) {//msg为我要发送的内容 比如"hello world"
 var msgObj = {
  SenderID: "222",
  ReceiverID: "111",
  MessageType: "text",
  Content: msg
 };
 this.ws.send(JSON.stringify(msgObj));
 }

登入後複製

ws://localhost: 56892?sid=222 這是websocke服務連結位址
sid表示著我這個端的WebSocke唯一標識找到這個key就可以找到我這個用戶端了

6.在web端也實現一個會話視窗

登入後複製

基本開發完成接下來看看效果

7.web和webapp端對話