zoukankan      html  css  js  c++  java
  • 二、在 ASP.NET Core 中使用 SignalR之类库

    一、前段代码:

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">&nbsp;</div>
                <div class="col-6">
                    User..........<input type="text" id="userInput" />
                    <br />
                    Message...<input type="text" id="messageInput" />
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <hr />
                </div>
            </div>
            <div class="row">
                <div class="col-6">&nbsp;</div>
                <div class="col-6">
                    <ul id="messagesList"></ul>
                </div>
            </div>
        </div>
        <script src="~/lib/signalr/dist/browser/signalr.js"></script>
        <script type="text/javascript">
            "use strict";
            var connection = new signalR.HubConnectionBuilder().withUrl("/signalr").build();
            //在建立连接之前禁用发送按钮
            document.getElementById("sendButton").disabled = true;
            //接受消息
            connection.on("ReceiveMessage", function (user, message) {
                var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                var encodedMsg = user + " says " + msg;
                var li = document.createElement("li");
                li.textContent = encodedMsg;
                document.getElementById("messagesList").appendChild(li);
            });
            //开始链接
            connection.start().then(function () {
                document.getElementById("sendButton").disabled = false;
            }).catch(function (err) {
                return console.error(err.toString());
            });
            //发送消息
            document.getElementById("sendButton").addEventListener("click", function (event) {
                var user = document.getElementById("userInput").value;
                var message = document.getElementById("messageInput").value;
                connection.invoke("SendMessage", user, message).catch(function (err) {
                    return console.error(err.toString());
                });
                event.preventDefault();
            });
        </script>
    </body>
    </html>

    原本var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();//这种是在项目内的Hub文件夹内的charHub类指定的方式

    更改var connection = new signalR.HubConnectionBuilder().withUrl("/signalr").build(); //类库的名称signalr

     二、Startup.cs配置文件

    app.UseSignalR(routes =>
    {
        routes.MapHub<ChatHub>("/SignalR");     //可以多个map  
    });

    原本 routes.MapHub<ChatHub>("/chatHub"); //可以多个map   ChatHub位于

     原因是因为:

  • 相关阅读:
    微信小店 API 手册
    解密微信介入智能硬件的逻辑
    秒“增”微信粉丝12亿的方法
    微信公众平台开发(99) 自定义菜单获取OpenID
    微信企业号
    微信电商再侵袭,腾讯要革淘宝的命
    微信公众平台开发(98) UnionID
    微信公众平台开发(97) 图文消息
    微信公众平台开发(96) 多个功能整合
    微信公众平台开发(95) 世界杯赛程
  • 原文地址:https://www.cnblogs.com/fger/p/11606244.html
Copyright © 2011-2022 走看看