NetCore WebSocket instant messaging example: netcorewebsocket

NetCore WebSocket instant messaging example: netcorewebsocket

1. Create a Netcore Web Project

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Create a simple communication protocol

 

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

SenderID: the sender ID.

ReceiverID: receiver ID

MessageType message types such as Text Voice

Content message Content

3. Add the middleware ChatWebSocketMiddleware

 

  1 public class ChatWebSocketMiddleware  2     {  3         private static ConcurrentDictionary<string, System.Net.WebSockets.WebSocket> _sockets = new ConcurrentDictionary<string, System.Net.WebSockets.WebSocket>();  4   5         private readonly RequestDelegate _next;  6   7         public ChatWebSocketMiddleware(RequestDelegate next)  8         {  9             _next = next; 10         } 11  12         public async Task Invoke(HttpContext context) 13         { 14             if (!context.WebSockets.IsWebSocketRequest) 15             { 16                 await _next.Invoke(context); 17                 return; 18             } 19             System.Net.WebSockets.WebSocket dummy; 20  21             CancellationToken ct = context.RequestAborted; 22             var currentSocket = await context.WebSockets.AcceptWebSocketAsync(); 23             //string socketId = Guid.NewGuid().ToString(); 24             string socketId = context.Request.Query["sid"].ToString(); 25             if (!_sockets.ContainsKey(socketId)) 26             { 27                 _sockets.TryAdd(socketId, currentSocket); 28             } 29             //_sockets.TryRemove(socketId, out dummy); 30             //_sockets.TryAdd(socketId, currentSocket); 31  32             while (true) 33             { 34                 if (ct.IsCancellationRequested) 35                 { 36                     break; 37                 } 38  39                 string response = await ReceiveStringAsync(currentSocket, ct); 40                 MsgTemplate msg = JsonConvert.DeserializeObject<MsgTemplate>(response); 41  42                 if (string.IsNullOrEmpty(response)) 43                 { 44                     if (currentSocket.State != WebSocketState.Open) 45                     { 46                         break; 47                     } 48  49                     continue; 50                 } 51  52                 foreach (var socket in _sockets) 53                 { 54                     if (socket.Value.State != WebSocketState.Open) 55                     { 56                         continue; 57                     } 58                     if (socket.Key == msg.ReceiverID || socket.Key == socketId) 59                     { 60                         await SendStringAsync(socket.Value, JsonConvert.SerializeObject(msg), ct); 61                     } 62                 } 63             } 64  65             //_sockets.TryRemove(socketId, out dummy); 66  67             await currentSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closing", ct); 68             currentSocket.Dispose(); 69         } 70  71         private static Task SendStringAsync(System.Net.WebSockets.WebSocket socket, string data, CancellationToken ct = default(CancellationToken)) 72         { 73             var buffer = Encoding.UTF8.GetBytes(data); 74             var segment = new ArraySegment<byte>(buffer); 75             return socket.SendAsync(segment, WebSocketMessageType.Text, true, ct); 76         } 77  78         private static async Task<string> ReceiveStringAsync(System.Net.WebSockets.WebSocket socket, CancellationToken ct = default(CancellationToken)) 79         { 80             var buffer = new ArraySegment<byte>(new byte[8192]); 81             using (var ms = new MemoryStream()) 82             { 83                 WebSocketReceiveResult result; 84                 do 85                 { 86                     ct.ThrowIfCancellationRequested(); 87  88                     result = await socket.ReceiveAsync(buffer, ct); 89                     ms.Write(buffer.Array, buffer.Offset, result.Count); 90                 } 91                 while (!result.EndOfMessage); 92  93                 ms.Seek(0, SeekOrigin.Begin); 94                 if (result.MessageType != WebSocketMessageType.Text) 95                 { 96                     return null; 97                 } 98  99                 using (var reader = new StreamReader(ms, Encoding.UTF8))100                 {101                     return await reader.ReadToEndAsync();102                 }103             }104         }105     }

 

Control that only the recipient can receive the message if (socket. key = msg. receiverID | socket. key = socketId) {await SendStringAsync (socket. value, JsonConvert. serializeObject (msg), ct );}

 

4. Use middleware in Startup. cs

app.UseWebSockets();app.UseMiddleware<ChatWebSocketMiddleware>();

 

5. Create a mobile client test example. Here Ionic3 is used to run on the web Client.

If you have created an ionic3 project, click here to view it, or if you have an Angular2/4 Project, you can view it directly.

(1) Start the Ionic Project

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

At the beginning, many problems were encountered in the ionic3 project.

For example, if the ionic-cli fails to initialize the project, you can switch to the default npmorg source.

For example, ionic serve fails to open the proxy and allow FQ.

The interface is as follows:

 

(2) create a chat window dialog specific layout implementation module load a little more directly into websocket implementation

Before that, do not forget to start the web Project. Otherwise, the service will not be linked.

(3) Implementation of dialog. ts

Export class Dialog {private ws: any; private msgArr: Array <any>; 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 is the content I want to send, such as "hello world" var msgObj = {SenderID: "222", ReceiverID: & quot; 111 & quot;, MessageType: & quot; text & quot;, Content: msg}; this. ws. send (JSON. stringify (msgObj ));}

Ws: // localhost: 56892? Sid = 222 this is the link address of the websocke service. sid indicates that the unique identification of WebSocke on this end can find this key. 6. A session window is also implemented on the web end.

<div class="container" style="width:90%;margin:0px auto;border:1px solid steelblue;">    <div class="msg">        <div id="msgs" style="height:200px;"></div>    </div>    <div style="display:block;width:100%">        <input type="text" style="max-width:unset;width:100%;max-width:100%" id="MessageField" placeholder="type message and press enter" />    </div></div>

<script>        $(function () {            $('.navbar-default').addClass('on');            var userName = '@Model';            var protocol = location.protocol === "https:" ? "wss:" : "ws:";            var wsUri = protocol + "//" + window.location.host + "?sid=111";            var socket = new WebSocket(wsUri);            socket.onopen = e => {                console.log("socket opened", e);            };            socket.onclose = function (e) {                console.log("socket closed", e);            };            socket.onmessage = function (e) {                console.log(e);                var msgObj = JSON.parse(e.data);                $('#msgs').append(msgObj.Content + '<br />');            };            socket.onerror = function (e) {                console.error(e.data);            };            $('#MessageField').keypress(function (e) {                if (e.which != 13) {                    return;                }                e.preventDefault();                var message = $('#MessageField').val();                var msgObj = {                    SenderID:"111",                    ReceiverID:"222",                    MessageType: "text",                    Content: message                };                socket.send(JSON.stringify(msgObj));                $('#MessageField').val('');            });        });    </script>

 

After basic development is completed, let's take a look at the results.

 

7. web and webapp conversation

 

8. webapp sends web reception

9. At present, this is achieved because the project involves other technologies and the source code is not open for the time being.