526互联

SignalR服务端及客户端实现

发布时间 2023-04-02 23:42:22作者: star丶清影

服务器端：

引用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();
        }
    }

　　

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>