开发工具与关键技术： js
作者：GuanLW
撰写时间：2022/3/18
第一步：先在vs的NuGet包中下载安装Microsoft.AspNet.SignalR。安装完成后会多以下几个文件
?
第二步：右键项目->新建项，选择signalr集线器类，并写入代码，namespace与类名记得改成实际类名
如下：
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace webLoans
{
??? [HubName("msgHub")]//客户端调用，首字母要小写
??? public class MsgHub : Hub
??? {
??????? //在hub中编写的方法，都是要被客户端调用的方法
??????? [HubMethodName("sendMsg")]//客户端调用，首字母要小写
??????? public void SendMsg(string name, string txt)
??????? {
??????????? //服务器主动调用客户端的方法，即客户端必须有getMsg方法
??????????? Clients.All.getMsg(name, txt);
??????? }
??? }
}第三步：右键项目，新建普通类Startup.cs
如下：
using Microsoft.Owin;
using Owin;
using System;
using System.Threading.Tasks;
[assembly: OwinStartup(typeof(webLoans.Startup))]
namespace webLoans
{
??? public class Startup
??? {
??????? public void Configuration(IAppBuilder app)
??????? {
??????????? // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
??????????? app.MapSignalR();
??????? }
??? }
}这时可以先测试一下，运行项目，在网页中输入地址https://localhost:44340/signalr/hubs，注意填入实际端口号。网页显示部分内容如下：
第四步：编写html页面，代码如下：
@{
??? Layout = null;
}
<!DOCTYPE html>
<html>
<head>
??? <meta charset="utf-8" />
??? <title></title>
??? <script src="~/Scripts/jquery-1.6.4.js"></script>//实际的路径
??? <script src="~/Scripts/jquery.signalR-2.4.3.js"></script>//实际的路径
??? <script src="/signalr/hubs"></script>//动态生成的
??? <script>
??????? //绑定登录按钮的事件
??????? $(function () {
??????????? $("#btnLogin").click(function () {
??????????????? login();
??????????? });
??????? });
??????? function login() {
??????????? if ($("#txtName").val().length > 0)
??????????????? sessionStorage.setItem("user", $("#txtName").val());
??????????? else {
??????????????? alert("登录失败");
??????????????? return;
??????????? }
??????????? $("#sendBtn").removeAttr("disabled");
??????????? serverClient();
??????? }
??????? //服务器连接操作
??????? function serverClient() {
??????????? //注册服务器连接
??????????? var msgHub = $.connection.msgHub;
??????????? //2.给客户端注册方法，被服务器调用的方法,
??????????? //服务器主动调用给txt内容，客户端被动接收
??????????? //接收到之后做什么
??????????? msgHub.client.getMsg = function (name, txt) {
??????????????? //var txtTemplate = "<div><span>{{name}}</span>:<span>{{content}}</span></div> ";
??????????????? //var html = txtTemplate.replace('{{name}}', name).replace('{{content}}', txt);
??? ????????????//$("#msgList").append(html);
??????????????? var txtHtml = '<li><strong>' + htmlEncode(name)
??????????????????? + '</strong>: ' + htmlEncode(txt) + '</li>';
??????????????? $("#msgList").append(txtHtml);
??????????????? //alert(txt);
??????????? }
??????????? //3.启动连接并绑定处理事件
??????????? $.connection.hub.start().done(function () {
??????????????? $("#sendBtn").click(function () {
??????????????????? msgHub.server.sendMsg(sessionStorage.getItem("user"), $("#txtMsg").val());
??????????????????? $('#txtMsg').val('').focus();
??????????????? })
??????????? }).fail(function () {
??????????? });
??????? }
??????? // 将发来的信息转化为html标签以便添加到页面
??????? function htmlEncode(value) {
??????????? var encodedValue = $('<div />').text(value).html();
??????????? return encodedValue;
??????? }
??? </script>
</head>
<body>
??? <div id="msgList">
??? </div>
??? <input type="text" id="txtName" name="name" value="" />
??? <button id="btnLogin">登录</button>
??? <input type="text" id="txtMsg" name="name" value="" />
??? <button id="sendBtn" disabled="disabled">发送消息</button>
</body>
</html>注意头部引用的脚本，前两个是你的项目中的实际脚本文件，最后一个是在运行时动态生成的，实际使用时需要修改前两个。
第五步：打开两个网页进行测试，效果如下：
先输入登录名，然后发送信息即可。可以实时聊天。
这是我所学到的一些知识，在此分享给大家，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！