SignalR学习二：给指定用户发送消息

ChatHub.cs中添加登陆和单发消息方法

 //用户登陆后记录
public async Task UserLogin(string name)
{
     if (!userlist.Contains(name))
     {
         userlist.Add(name);
         _connections.Add(name, Context.ConnectionId);
     }
     else
     {
        //ConnectionId会随着每次登陆而改变
        _connections[name] = Context.ConnectionId;
     }
}

//给指定用户发消息方法
 public void SendMsgToUser(string fromUser,string toUser,string message)
 {
      Clients.Client(_connections[toUser]).SendAsync("ReceiveMessage",fromUser,message);
 }

修改前端页面

image.png

@{
    ViewData["Title"] = "Index";
}

    当前登陆用户： @ViewBag.username
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-2">User</div>
            <div class="col-4"><input type="text" id="userInput" value="@ViewBag.username" /></div>
        </div>
        <div class="row">
            <div class="col-2">ToUser</div>
            <div class="col-4"><input type="text" id="touserInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">Message</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="Send Message" />
                <input type="button" id="sendSigleButton" value="Send Sigle Message" />
            </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="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>

修改前端js

在connection.start()中调用登陆方法userLogin

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
    var fromUser = document.getElementById("userInput").value;
    connection.invoke("userLogin", fromUser).catch(function (err) {
    })
}).catch(function (err) {
    return console.error(err.toString());
});

点击单独发送消息按钮调用单独发消息方法sendMsgToUser

document.getElementById("sendSigleButton").addEventListener("click", function (event) {
    console.log("in send methon");
    var fromUser = document.getElementById("userInput").value;
    var toUser = document.getElementById("touserInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("sendMsgToUser", fromUser, toUser, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

运行

image.png