当前位置： 移动技术网 > IT编程>开发语言>.net > NetCore WebSocket即时通讯示例

NetCore WebSocket即时通讯示例

2017年12月08日  | 移动技术网IT编程  | 我要评论

暴打书呆子,红楼梦之十二金钗游戏,白隼

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端也实现一个会话窗口

<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>

基本开发完成 接下来看看效果

7.web和webapp端对话

8.webapp发送 web接收

9.目前就实现了这么多  因为项目还涉及其它技术 暂时不开放源码了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网