SignalR 实现简单的【私聊】功能

JiaMu Sun

已于 2022-07-21 15:31:47 修改

阅读量1.3k

点赞数 1

于 2022-03-30 14:39:24 首次发布

本文链接：https://blog.csdn.net/qq_45026510/article/details/123845905

版权

SignalR实现私聊的方法：

详情：将SignalR用户映射到连接

创建项目

1.创建项目以 .NET Framework 为例

2.添加 Nuget 包

添加如图所示的包

添加 Hub类

继承 Hub类

创建私聊用的映射类

添加 StartUp类

编写前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>SignalR Demo One</h1>
    <input type="text" id="connectionid" value="" placeholder="输入连接ID" />
    <input type="button" id="send" value="发送" />
    <hr />
    <input type="text" id="uid" value="" placeholder="输入用户ID" />
    <input type="button" id="sendbyUid" value="发送" />
</body>
</html>
<script src="Scripts/jquery-3.4.1.js"></script>
<script src="Scripts/jquery.signalR-2.2.2.js"></script>
<script src="Scripts/jquery.cookie.min.js"></script>
<script src="/signalr/hubs"></script>
<script>
    $(function () {

        //设置cookie 保存UID
        //sessionStorage.setItem('userId', randomString(12));
        $.cookie('userId', randomString(12), { expires: 7 });

        //注册服务中心
        var connection = $.connection.myHub;

        //注册客户端方法 由服务端调用
        connection.client.GetStartMsg = function (msg) {
            console.log(msg);
        };

        connection.client.SendMsg = function (msg) {
            console.log(msg);
            //alert(msg);
        };

        connection.client.SendMsgByUid = function (msg) {
            console.log(msg);
        };

        //绑定事件
        $("#send").click(function () {
            //通过connectionID发送
            connection.server.sendMsgByConnectionId($("#connectionid").val());
        });

        $("#sendbyUid").click(function () {
            //通过UID发送
            connection.server.sendMsgByUid($("#uid").val());
        });

        //启动连接
        $.connection.hub.start()
            .done(function () {
                console.log("OK!");
                connection.invoke('getConnectionId')
                    .then(function (connectionId) {
                        sessionStorage.setItem('conectionId', connectionId);
                        // Send the connectionId to controller                        
                    }).catch(err => console.error(err.toString()));;
                
                connection.server.startMsg();

            })
            .fail(function () {
                console.log("ERROR!");
            });

        //获取随机字符当做UID
        function randomString(e) {
            e = e || 32;
            var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
                a = t.length,
                n = "";
            for (i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
            return n
        };
    });
</script>

演示

源码

JiaMu Sun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SignalR 实现简单的【私聊】功能

SignalR实现私聊的方法：详情：将SignalR用户映射到连接创建项目1.创建项目以 .NET Framework 为例2.添加 Nuget 包添加如图所示的包添加 Hub类继承 Hub类创建私聊用的映射类添加 StartUp类[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-POfCFBZh-1648622254829)(./images/1648620336170.png)]编写前端代码<!DOCTYPE html&gt
复制链接

扫一扫