asp.net mvc SignalR 教程（制作简单的聊天室）

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

罗汉松驻扎的工作基地

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

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/116304333

版权

近来跟着微软的教程学习signalR ，官网例子是

https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr

我跟着这个例子做了好多次，终于成功了，在这个跟大家分享一些细节的截图，如果有误请见谅。

首先在visual studio 2017里面建立一个asp.net mvc 的空工程项目

建立好项目之后，像普通一样，加入HomeController 和 Index 页面：

/*******************后台***********************/

 public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }


/***********************前台*********************/


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

</head>
<body>
    <div> 
        <p>home index</p>
    </div>
</body>
</html>

这样一个简单的网站就可以正常运行起来了，接着使用NeGut 工具下载 signalR 的一些组件：

安装截图里面的两个（备注：官网的例子可能是以前写的，现在需要加入这三个才能正常运行，我一开始按照官网上面说的 install 来做，只加入了第一个，发现运行代码的时候，前端js总是提示好的错误，试了很多种方法之后，终于发现要加入三个才行。）

加入了这两个组件之后，可以发现references 和 scripts 里面多了一些dll 和js ，接下来就是用这些东西写代码了。

然后接着写代码，在controller 文件夹里面加入 hub类，名字是 ChatHub.cs

chartHub.cs的代码如下：请注意要加入 [HubName] 和 [HubMethodName], 好让前端js 识别名称。这些名字都以小写字母开头。具体原因请百度。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace sigalrTest6.Controllers
{
    [HubName("chatHub")]
    public class ChatHub : Hub
    {
        [HubMethodName("send")]
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

然后继续在controller 文件夹里加入 OWIN startup class ，名叫就叫做Startup.cs

代码如下：

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(signalrTest5.Controllers.Startup))]

namespace signalrTest5.Controllers
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }


}

有了这两个代码之后，就可以去编辑前端的cshtml 文件了， index 页面的代码如下：（代码跟官网的一样，这里就不拓展了，自己加工吧）


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>

</head>
<body>
    <div> 
        <p>home page</p>
    </div>

    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>

    <!--Reference the jQuery library. -->
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
    </script>

</body>
</html>

这里的前端页面值得提醒的一点是：

jquery.min.js 和 signalr.min.js 的路径必须是你项目中存放的路径，官网的只是一个例子，可能跟你现实的不一样。

另外 <script src="signalr/hubs"></script> 是运行时候产生的script 不用管也行。

写到这里，可以运行代码尝试聊天界面了：

我下次再做一个深入一点的说明。这里只是一个简简单单的例子。

罗汉松驻扎的工作基地

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
asp.net mvc SignalR 教程（制作简单的聊天室）

近来跟着微软的教程学习signalR ，官网例子是https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr我跟着这个例子做了好多次，终于成功了，在这个跟大家分享一些细节的截图，如果有误请见谅。首先在visual studio 2017里面建立一个asp.net mvc 的空工程项目建立好项目之后，像普通一样，加入H.
复制链接

扫一扫