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[]);
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(, 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失败 打开代理允许翻墙就好了

启动后界面是这样式的

(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: "",
ReceiverID: "",
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 != ) {
return;
} e.preventDefault(); var message = $('#MessageField').val(); var msgObj = {
SenderID:"",
ReceiverID:"",
MessageType: "text",
Content: message
};
socket.send(JSON.stringify(msgObj));
$('#MessageField').val('');
});
});
</script>

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

7.web和webapp端对话

8.webapp发送  web接收

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

NetCore WebSocket 即时通讯示例的更多相关文章

  1. [开源] .NETCore websocket 即时通讯组件---ImCore

    前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...

  2. 使用tomcat方式实现websocket即时通讯服务端讲解

    使用tomcat方式实现websocket即时通讯服务端讲解 第一种方案:使用Tomcat的方式实现 tomcat版本要求:tomcat7.0+.需要支持Javaee7 导入javeee-api的ja ...

  3. Springboot 项目源码 Activiti6 工作流 vue.js html 跨域 前后分离 websocket即时通讯

    特别注意: Springboot 工作流  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0.0+ mybaits+maven+接 ...

  4. java SSM框架 代码生成器 快速开发平台 websocket即时通讯 shiro redis

    A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 , ...

  5. [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了

    有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...

  6. java ssm 后台框架平台 项目源码 websocket 即时通讯 IM quartz springmvc

    官网 http://www.fhadmin.org/D 集成安全权限框架shiro  Shiro 是一个用 Java 语言实现的框架,通过一个简单易用的 API 提供身份验证和授权,更安全,更可靠E ...

  7. java SSM 框架 代码生成器 websocket即时通讯 shiro redis

    1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限      角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限.      按钮权限: 给角色分配按钮权限. ...

  8. JavaScript进行WebSocket字节流通讯示例

    websocket进行通讯时,可以选择采用字符串或者字节流的传输模式.但在发送与接收时,需要考虑数据的分包,即分成一个个请求与响应消息.无论是采用哪种传输模式,都不免要遇到这个问题. 采用字符串传输时 ...

  9. java SSM 框架 多数据源 代码生成器 websocket即时通讯 shiro redis 后台框架源码

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

随机推荐

  1. JVM 堆内存,参数优化

    Java堆内存 http://www.importnew.com/19593.html JVM诊断之查看运行参数 JVM 垃圾回收器工作原理及使用实例介绍 https://www.ibm.com/de ...

  2. base 镜像 - 每天5分钟玩转容器技术(10)

    上一节我们介绍了最小的 Docker 镜像,本节讨论 base 镜像. base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 所以,能称作 base ...

  3. Java提高(一)---- HashMap

    阅读博客 1, java提高篇(二三)-----HashMap 这一篇由chenssy发表于2014年1月,是根据JDK1.6的源码讲的. 2,Java类集框架之HashMap(JDK1.8)源码剖析 ...

  4. MongoDB3.4 shell CRUD操作

    输入db,显示你正在操作的数据库:切换数据库,输入use dbName,如果数据库不存在的话会自动帮我们创建一个:使用show dbs可以显示所有可用的数据库. 测试数据在文末 插入文档 插入操作的行 ...

  5. 关于IT创业和反思

    2016年8月的某一天本是世上平凡的一天,对于我而言却并不平凡. 这一天,我离开了待了近四年的创业公司.从它成立前的筹备开始,伴随着它的起起伏伏到完成C轮融资,从来没想过以这种方式离开,然而人生总是充 ...

  6. matlab笔记(1) 元胞结构cell2mat和num2cell

    摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...

  7. 与redmine对接

    redmine使用的版本为 2.3.01.打开rest web service2.jar依赖 <dependency> <groupId>com.taskadapter< ...

  8. (原创)性能测试中,Oracle服务器定位CPU使用率高的瓶颈(SQL)

    本篇博客记录一次性能测试过程中,定位对CPU使用率高的瓶颈问题,主要定位SQL为准 一.用SQL命令定位1.首先用TOP命令监控系统资源,如果是AIX系统,就用topas,进入TOP命令的滚动刷新数据 ...

  9. Java实现八种排序算法(代码详细解释)

    经过一个多星期的学习.收集.整理,又对数据结构的八大排序算法进行了一个回顾,在测试过程中也遇到了很多问题,解决了很多问题.代码全都是经过小弟运行的,如果有问题,希望能给小弟提出来,共同进步. 参考:数 ...

  10. Gulp文档入门的文档

    Gulp自动化执行文件的操作 首先gulp基于node开发的,先按照node.js,使用npm sudo npm install -g gulp (在全局的范围安装 gulp) gulp --help ...