一、新建控制台应用程序（.net framework 4.8)
SignalRSelfHost
二、引入NuGet包
install-package Microsoft.AspNet.SignalR.Core
install-package Microsoft.AspNet.SignalR.SelfHost
install-package Microsoft.Owin
install-package Microsoft.Owin.Cors
三、编写服务端程序
using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;
using Microsoft.Owin.Hosting;
using Owin;
using System;
namespace SignalRSelfHost
{
internal class Program
{
static void Main(string[] args)
{
//signalr server地址,端口可以更换，确保不被占用，否则起不来
string url = "http://localhost:8080";
//启动web应用
using (WebApp.Start(url))
{
Console.WriteLine("Server running on {0}",url);
Console.ReadLine();
}
}
}
/// <summary>
/// 配置跨域请求、SignalR Server
/// </summary>
class Startup
{
public void Configuration(IAppBuilder app)
{
app.UseCors(CorsOptions.AllowAll);
app.MapSignalR();
}
}
/// <summary>
/// 发送给所有Client广播信息
/// </summary>
public class MyHub : Hub
{
/// <summary>
/// 被客户端
/// </summary>
/// <param name="name"></param>
/// <param name="message"></param>
public void Send(string name,string message)
{
Clients.All.addMessage(name,message);
}
}
}
四、新建一个Web应用
引入NuGet包：Microsoft.AspNet.SignalR.JS
设置 Default.html 为启动页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SignalR Simple Chat</title>
<style type="text/css">
.container{
background-color:#99CCFF;
border:thick solid #808080;
padding:20px;
margin:20px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname"/>
<ul id="discussion"></ul>
</div>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.3.min.js"></script>
<!-- 引用自动生成的SignalR hub 脚本 -->
<script src="http://localhost:8080/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// hub url
$.connection.hub.url = "http://localhost:8080/signalr";
// hub代理类
var chat = $.connection.myHub;
//定义一个方法，hub可以调用该方法发送广播消息
chat.client.addMessage = function (name, message) {
var encodeName = $('<div />').text(name).html();
var encodeMsg = $('<div />').text(message).html();
$('#discussion').append('<li><strong>' + encodeName
+ '</strong>: ' + encodeMsg + '</li>');
};
//获取用户名，加入消息
$('#displayname').val(prompt('Enter your name:', ''));
//消息输入框获取焦点
$('#message').focus();
//启动连接
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
chat.server.send($('#displayname').val(), $('#message').val());
$('#message').val('').focus();
});
});
});
</script>
</body>
</html>
五、应用效果演示
