Winform作为server
1.添加nuget
- Microsoft.AspNet.SignalR.SelfHost
- Microsoft.Owin.Cors
其中：
Microsoft.AspNet.SignalR.SelfHost 版本2.4.1 包里面包含SignalR类所以除了这两个不需要任何其他包
Microsoft.Owin.Cors 版本4.1.0 解决跨域问题
2.创建Hub
using Microsoft.AspNet.SignalR;
//Hub的别名,方便前台调用
//[HubName("abc")]
public class MyHub : Hub
{
/// <summary>
/// 编写发送信息的方法
/// </summary>
/// <param name="name"></param>
/// <param name="message"></param>
// [HubMethodName("send")]
public void Send(string name, string message)
{
//调用所有客户注册的本地的JS方法(addMessage)
Clients.All.addMessage(name, message);
//调用当前客户注册的本地的JS方法(addMessage)
Clients.Caller.addMessage(name, message);
}
}
3.注册中间件
代码
using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;
[assembly: OwinStartup(typeof(SignalRServer.Startup))]
namespace SignalRServer
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
//跨域
app.UseCors(CorsOptions.AllowAll);
////配置生成代理
app.MapSignalR();
// app.MapSignalR("/client", new HubConfiguration());
//app.Map("/messageHub", map =>
//{
// map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true });
//});
//app.Map("/messageConnection", map =>
//{
// map.RunSignalR<MessageConnection>();
//});
}
}
}4.开启服务
string ServerUri="http://localhost:8000/";
IDisposable SignalR = WebApp.Start(ServerUri);可以使用线程来开启
用Html作为客户端
1.添加nuget
- Microsoft.AspNet.SignalR.JS
Microsoft.AspNet.SignalR.JS 版本2.4.1 里面包含网页需要引用的signalr脚本
2.创建html页面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="context">
</div>
</body>
</html>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="http://localhost:8000/signalr/js"></script>
<script src="Scripts/SignalR.js"></script>注意
- localhost:8000/signalr/js 要和服务端的相对应
- js引用的顺序不能错
3.SignalR.js里面的代码
(
function () {
let hubUrl = 'http://localhost:8000/signalr';
let myhub = $.connection.messageHub;
let log = $.connection.hub.log;
$.connection.hub.url = hubUrl;
$.connection.hub.start()
.done(function () {
$.connection.hub.logging = true;
$.connection.hub.log(1);
myhub.server.send("abc", "def").done(function () {
showToHtml("client调用了send方法");
log("it works!!!");
}).fail(function () {
log("Noooo!!!");
});
})
.fail(function () {
})
myhub.client.addMessage = function myfunction(a, b) {
showToHtml("服务端调用了addMessage方法");
log("into func");
}
let showToHtml = function (msg) {
$("#context").append(msg + "<br/>");
}
}
)()这里要注意：winform里面类/方法采用的是C#命名规则，当在js里面时，会自动生成js的命名规则
4.网页最终目录结构
5.运行网页
首先需要先运行winform 服务端
出现2次服务端调用了addMessage方法是因为MyHub方法Send调用了两次
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。