Asp.Net Core + SignalR 实现实时通信

一、搭建项目

1、创建一个asp.net core mvc 项目

 

2、nuget 下载和安装 microsoft.aspnetcore.signalr

vs提示版本冲突

这时我们选择低版本即可

二、signalr配置

1、在model中创建一个类myhub 代码如下

 public class myhub:hub
    {
        public async task sendmessage(string user, string message)
        {
            await clients.all.sendasync("receivemessage", user+"["+datetime.now.tolongtimestring()+"]", message);
        }
        public async task sendmessagetouser(string user, string message)
        {
            await clients.client(context.connectionid).sendasync("receivemessage", user + ":" + datetime.now.tolongtimestring()+"]", message);
        }
    }

view code

 

2、在startup中注入signalr并在configure中配置路由

 

 3、右键项目名=>添加=>添加客户端库

 

 

 

•  对于“提供程序”选择unpkg。

• 对于“库”输入 @aspnet/signalr@1.0.4  （@1.0.4 是根据 nuget signalr的本本定的）。

• 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择“signalr.js”和“signalr.min.js”。

• 将“目标位置”设置为 wwwroot/lib/signalr/，然后选择“安装”。

 

 

配置完毕。

三、编码实现

1、修改views/home中的index.cshtml如下

<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 src="~/js/chat.js"></script>

view code

2、在js文件见创建一个js文件 chat.js

var connection = new signalr.hubconnectionbuilder().withurl("/chathub").build();

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

view code

3、ctrl+f5 运行出两个网页