SignalR服务端及客户端实现

2023-06-20,,

服务器端:

引用nuget:

1、Microsoft.AspNet.SignalR.SelfHost

2、Microsoft.Owin.Cors

    internal class Program
{
static void Main(string[] args)
{
string uri = "http://localhost:8081"; using (WebApp.Start(uri))
{
Console.WriteLine("Server running on {0}", uri);
Console.ReadLine();
}
}
} class Startup
{
public void Configuration(IAppBuilder app)
{
app.UseCors(CorsOptions.AllowAll); app.MapSignalR(new HubConfiguration
{
EnableJavaScriptProxies = false // 禁用自动生成代理
});
}
}

  

Hub实现类

    public class MD5 : Hub
{
public void encode(string clientId, string jsonRequest)
{
// Clients.All.addMessage(clientId, Guid.NewGuid().ToString()); IClientProxy proxy = Clients.Caller;
proxy.Invoke(clientId, clientId, Guid.NewGuid().ToString()); Console.WriteLine("id:{0} qs:{1}", Context.ConnectionId, Context.QueryString["version"]); } public override Task OnDisconnected(bool stopCalled)
{
Console.WriteLine("stop:{0}", Context.ConnectionId); return base.OnDisconnected(stopCalled);
} public override Task OnConnected()
{
Console.WriteLine("start:{0}", Context.ConnectionId); return base.OnConnected();
}
}

  

客户端

引用nuget:

1、Microsoft.AspNet.SignalR.JS

<!DOCTYPE html>
<html>
<head>
<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>
<script type="text/javascript">
$(function () {
var connection = $.hubConnection("http://localhost:8081/signalr", { useDefaultPath: false });
connection.qs = { 'version': '1.0' }; var _proxy = connection.createHubProxy('mD5');
_proxy.on('signalRCallBack', function (name, message) {
console.log(name + ' ' + message);
}); connection.start().done(function () {
$('#sendmessage').click(function () {
_proxy.invoke('encode', 'signalRCallBack', $('#message').val());
});
})
.fail(function () {
console.log('服务器连接失败');
});
});
</script>
</body>
</html>

  

SignalR服务端及客户端实现的相关教程结束。

《SignalR服务端及客户端实现.doc》

下载本文的Word格式文档,以方便收藏与打印。