这篇文章主要为大家详细介绍了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<string, system.net.websockets.websocket> _sockets = new concurrentdictionary<string, system.net.websockets.websocket>(); 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<msgtemplate>(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<byte>(buffer); return socket.sendasync(segment, websocketmessagetype.text, true, ct); } private static async task<string> receivestringasync(system.net.websockets.websocket socket, cancellationtoken ct = default(cancellationtoken)) { var buffer = new arraysegment<byte>(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<chatwebsocketmiddleware>();
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<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为我要发送的内容 比如"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端也实现一个会话窗口
<p class="container" style="width:90%;margin:0px auto;border:1px solid steelblue;"> <p class="msg"> <p id="msgs" style="height:200px;"></p> </p> <p 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" /> </p> </p>
<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>
基本开发完成 接下来看看效果
7.web和webapp端对话
8.webapp发送 web接收
9.目前就实现了这么多  因为项目还涉及其它技术 暂时不开放源码了
以上就是制作netcore websocket即时通讯实例详解的详细内容。