天天看点

SignalR 简易聊天室+SignalR如何跨域

十年河东,十年河西,莫欺少年穷

学无止境,精益求精 

一个在线聊天室,比本篇博客更齐全

截图如下:

SignalR 简易聊天室+SignalR如何跨域

环境:VS2012或以上,Frm版本4.5或以上,我用的是4.5.2

1、在 Visual Studio 中,创建一个 ASP.NET MVC Web 应用程序。

2、右键项目,添加hub类,并命名为:ChatHub【添加后,项目会自动引用SignalR的相关DLL程序集及会在Scripts文件中生成SignalR客户端JS文件】

SignalR 简易聊天室+SignalR如何跨域

JS如下:

SignalR 简易聊天室+SignalR如何跨域

 ChatHub 类的代码如下:

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

View Code

在项目中添加命名为Startup的类,如下:

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

在解决方案资源管理器中,右键单击项目,然后选择 "添加 > " HTML 页",如下:

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

运行这个HTML页面,效果如下:

SignalR 简易聊天室+SignalR如何跨域

 聊天内容虽说不那么好吧,但我们对SignalR如何实现跨域还是非常认真的,那么怎么操作才可以跨域通信呢?

要实现SigNalR跨域,首选我们需要安装一个包,执行如下命令:

然后修改我们的Startup类,如下:

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

首先把你的项目复制一个副本出来,放到其他文件夹中,然后修改你复制项目的运行端口号,如下:

SignalR 简易聊天室+SignalR如何跨域

最后,客户端动态引用指定URL及端口号的signalR,修改副本HTML如下:

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

变更点:

SignalR 简易聊天室+SignalR如何跨域

 这样就可以跨域了,下面我们来模拟下跨域的请求,如下:

 1、启动并调试服务端项目,端口为:44330,并把chathub所有方法都打上断点,

/2、启动不调试你的副本项目,端口为:44333,我们通过观察断点是否能进入判断跨域请求是否成功

SignalR 简易聊天室+SignalR如何跨域

 证明跨域访问成功。

聊天内容如下:

SignalR 简易聊天室+SignalR如何跨域

最后记录下如何定向发送指定的连接

客户端有个 broadcastMessage 方法,接收两个参数,如下:

最后展示下我的成果【含跨域】:

Hub

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

Startup

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

HTML

SignalR 简易聊天室+SignalR如何跨域
SignalR 简易聊天室+SignalR如何跨域

响应效果

SignalR 简易聊天室+SignalR如何跨域

重连时,根据业务需求,需要mongoDB支持。

参考文献:

https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/introduction-to-signalr

https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr  

继续阅读