ASP.NET SignalR--即时通信实现【入门版】

最新推荐文章于 2024-05-23 11:14:03 发布

置顶 HinKai

最新推荐文章于 2024-05-23 11:14:03 发布

阅读量2.1k

点赞数 4

本文链接：https://blog.csdn.net/HinKai/article/details/83656888

版权

技术实现方法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

                                   开发环境 
Win10
Visual Studio 2015
.NET FRAMEWOKR 4.5 +
支持websocket的浏览器

没有GIF我会说我做过？贡笑,先来个简单粗暴的GIF效果图
在这里插入图片描述

Step1：创建MVC项目

在这里插入图片描述

Step2:安装AspNet.SignalR

工具>>NuGet包管理器（没有的话需要去扩展和更新安装NuGet Package Manager）>>程序包管理器控制台
在这里插入图片描述
在打开的控制台中输入以下代码并回车耐心等待：

Install-Package Microsoft.AspNet.SignalR

控制台出现一下画面则代表安装成功：
在这里插入图片描述

Step3:添加SignalR服务

添加->新建项->Visual C#/Web/SignalR，便可看到两种不同的通信模型(这里我们选择的是选择SignalR永久连接类（v2）)
在这里插入图片描述

在这里插入图片描述

Step4:修改部分文件代码

在根目录下找到Startup.cs并增加代码

app.MapSignalR<ChatConnection>("/Connections/ChatConnection");

在这里插入图片描述
在HomeController.cs增加以下代码：

public ActionResult PersistentConnection()
{
    return View();
}

在这里插入图片描述
在Views>Home中新建 PersistentConnection.cshtml

复制下列代码替换 PersistentConnection.cshtml 的初始代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>PersistentConnection</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // 声明PersistentConnection连接
            var connection = $.connection("/Connections/ChatConnection");

            $('#displayname').val(prompt('请输入您要使用的聊天名称:', ''));
            $("msg").focus();

            // 接收内容
            connection.received(function (data) {
                $('#messages').append('<li>' + data + '</li>');
            });

            // 开启连接
            connection.start().done(function () {
                $("#broadcast").click(function () {

                    // 发送内容
                    connection.send($('#displayname').val() + '：' + $('#msg').val());
                });
            });

        });
    </script>
</head>
<body>
    <input type="text" id="msg" />
    <input type="button" id="broadcast" value="broadcast" />
    <input type="hidden" id="displayname" />
    <ul id="messages"></ul>
</body>
</html>

                         **按下F5，打开崭新的世界大门吧!**

HinKai

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
ASP.NET SignalR--即时通信实现【入门版】

开发环境 Win10Visual Studio 2015.NET FRAMEWOKR 4.5 +支持websocket的浏览器没有GIF我会说我做过？贡笑,先来个简单粗暴的GIF效果图Step1：创建MVC项目Step2:安装AspNet.SignalR工具&amp;amp;gt;&amp;amp;gt;NuGet包管理器（没有的话需...
复制链接

扫一扫