Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一（Hubs 在线聊天室）

转载：Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一（Hubs 在线聊天室）

ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。

https://github.com/SignalR/SignalR.git

先给大家看看实现的效果图。本文底部有完整demo 不想看我墨迹的可以跳过了^_^.

第一步：

先创建一个目标框架是.netframework 4.5或以上的MVC项目。

然后选择工具---库程序包管理--如下图

在控制台输入：Install-Package Microsoft.AspNet.SignalR 回车

安装完成以后我们发现解决方案已经有引用了script文件夹里面也多了两个脚本文件

我们在项目根目录创建文件家Hubs

在创建一个类ChatHub.cs 需要继承Hub

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

namespace SignalR_Chat.Hubs
{
     [HubName("chat")]
    public class ChatHub : Hub
    {


        public void SendMessage(string message)
        {
            Clients.All.addNewMessageToPage(message);
        }
    }
}

添加OWIN Startup Class

修改代码

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

[assembly: OwinStartup(typeof(SignalR_Chat.Startup))]

namespace SignalR_Chat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
            //这个是下一篇永久连接类的 我们先不用
            //app.MapSignalR<MyConnection>("/echo");
        }
    }
}

好了我们开始客户端的准备工作。

先创建一个controller

在添加一个VIEW

html页面

@{
    ViewBag.Title = "Index";
}
@{
    Layout = null;
}

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>
    <form action="/" method="post">
        <textarea rows="10" cols="300" id="msg"></textarea>
        <button id="btn_send" type="button">send</button>
    </form>
    <div id="chatContent"></div>

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <!--<script src="~/Scripts/jquery.signalR-2.3.0.js"></script>-->
    <script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. 注意一定别忘记写这句，signalr生成的脚本都在这-->
    <script src="~/signalr/hubs"></script>
    <script src="~/Scripts/core/talk.js"></script>
</body>
</html>

talk.js

$(document).ready(function () {

    //talkMessage就是我们刚才创建继承Hub的类名。如果设置了[HubName("chat")]就是括号里面的名称为准。
    var chat = $.connection.chat;

    //接收服务器信息
    chat.client.addNewMessageToPage = function (message) {
        //#chatContent就是一个div层 我们把服务器返回的信息追加到这个层上 跟QQ聊天相反，新的信息我们追加顶部
        $('#chatContent').prepend(function () {
            $("#msg").val("");
            return "<div>" + message + "</div>";
        });
    };

    $.connection.hub.start().done(function () {

        $("#btn_send").click(function (e) {
            e.preventDefault();
            chat.server.sendMessage($("#msg").val());


        });


    });


});

好了启动项目跑起来把分别用两个浏览器来模拟不同的客户端来聊天吧。

demo