SinalR+WebSocket

1、参考资料:

http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-server

http://signalr.net/

http://www.asp.net/signalr/videos/getting-started/signalr-and-web-sockets

.Net FrameWork4.0版本只支持SginalR1.xx的版本,SignalR2.xxx需要Framework更高的版本支持

SignalR1.x应用   http://www.asp.net/signalr/overview/older-versions/tutorial-getting-started-with-signalr

SignalR support in .Net 4        http://stackoverflow.com/questions/15607252/signalr-support-in-net-4

2、Demo

第一步:创建hub公共类,注意只有设置为public类和方法才能被客户端调用;服务器端调用客户端方法--Clients.All.addMessage(message);

using System;
using System.Collections.Concurrent;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
namespace SignalRDemo
{
    public class MyChat : Hub
    {
        /// <summary>
        /// Sends the specified message.
        /// </summary>
        /// <param name="message">The message.</param>
        public void Send(string message)
        {
            // Call the addMessage method on all clients         
            Clients.All.addMessage(message);
        }
    }
}

第二步:定义客户端可以连接到你的hub的路由,调用MapSignalR扩展方法

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(SignalRDemo.Startup))]
namespace SignalRDemo
{
    public partial class Startup {
        public void Configuration(IAppBuilder app) {
            app.MapSignalR();
        }
    }
}

第三步:前端调用hub类方法

1、路由:    <script src='/signalr/hubs'></script>

2、创建proxy对象 chat = $.connection.myChat;

3、调用服务器端方法 chat.server.send();

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="/Scripts/jquery-1.10.2.js"></script>
    <script src="/Scripts/jquery.signalR-2.2.0.js"></script>
    <script src='/signalr/hubs'></script>
    <title></title>
</head>
<body>
    <script>
        var chat;
        $(function () {
            // Created proxy,此处要特别注意,Hub类的首字母是大写MyChat,但前端使用时,首字母要小写           
            chat = $.connection.myChat;
            // Assign a function to be called by the server        
            chat.client.addMessage = onAddMessage;
            // Register a function with the button click               
            $("#broadcast").click(onBroadcast);
            // Start the connection        
            $.connection.hub.start().done(function (a) {
                console.log("成功");
                console.log(a);
            });
        });
        function onAddMessage(message) {
            // Add the message to the list    
            $('#messages').append('<li>' + message + '</li>');
        };
        function onBroadcast() {        
            chat.server.send($('#message').val());
        }
    </script>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="message" />
        <input type="button" id="broadcast" value="broadcast" />
        <ul id="messages"></ul>
    </div>
    </form>
</body>
</html>

 

原文地址:https://www.cnblogs.com/mingjia/p/5455481.html