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

        }

    }

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>

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

});

3、Ctrl+F5 运行出两个网页

巴特西

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

最新文章

热门文章