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位于

     原因是因为:

  • 相关阅读:
    Delphi 实现任务栏多窗口图标显示
    Win7如何部署定制的Quicklaunch图标
    Delphi中关于菜单的几个技巧
    delphi里为程序任务栏右键菜单添加自定义菜单
    DELPHI 让子窗体显示在任务栏上
    C# Newtonsoft.Json 读取文件,返回json字符串
    C# Newtonsoft.Json 读取文件,返回json字符串
    在使用layui Table时,死活显示不了数据,无效的 JSON 基元 解决办法
    newtonsoft返回json去掉字符串
    ASP.NET MVC AJAX 请求中加入 antiforgerytoken 解决“所需的防伪表单字段“__RequestVerificationToken”不存在”问题
  • 原文地址:https://www.cnblogs.com/fger/p/11606244.html
Copyright © 2011-2022 走看看