JS实现简单的实时通讯（SignalR）

本文链接：https://blog.csdn.net/weixin_50498482/article/details/124175874

五、编写SignalR的UI页面和JS样式

六、最后进行项目测试

一、新建Web项目

新建一个文件夹，打开Visual Studio Code，创建新的Web应用，终端输入：

dotnet new webapp -o SignalRChat
code -r SignalRChat

二、添加SignaIR客户端库

在当前文件夹下，安装LibMan（库管理器）从 unpkg 获取客户端库，终端输入：

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

接着获取客户端库，终端输入：

libman install @microsoft/signalr@latest -p unpkg -d wwwroot/js/signalr --files dist/browser/signalr.js --files dist/browser/signalr.min.js

目的是为了将文件复制到 wwwroot/js/signalr 目标文件里，且仅复制指定的文件。

三、创建 SignalR 中心

在当前项目文件夹（SignalRChat ）中，创建 Hubs 文件夹并创建ChatHub.cs类

注意：async和await是进行异步处理的，await可简单理解成“等待”，await必须在async函数内部。

四、配置SignaIR

更新Program，注册服务并添加中间件

五、编写SignalR的UI页面和JS样式

打开Pages/Index.cshtml 进行内容替换：

@page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-2">用户名</div>
            <div class="col-4"><input type="text" id="userInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">消息框</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" value="发送消息" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script> 
<script src="~/js/chat.js"></script>

在 wwwroot/js 文件夹新建chat.js样式

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);

    li.textContent = `${user} ：${message}`;
});

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

六、最后进行项目测试

可按F5或者在终端输入：

dotnet watch run --project SignalRChat.csproj

复制网址，打开多个浏览器进行测试，可看到如下效果

本章完结