首页 > Web开发 > 详细

SignalR网页实时推送

时间:2017-12-01 11:01:54      阅读:459      评论:0      收藏:0      [点我收藏+]

1.新建项目,选择mvc4 Wed应用程序,选择Internet,视图引擎:Razor
技术分享图片

2.在控制器中添加
技术分享图片

并添加上视图

3.引用(install-package Microsoft.AspNet.SignalR)
技术分享图片

4.添加Startup
技术分享图片

技术分享图片

项目名

5.新建Hubs文件夹,添加ChatHub类
技术分享图片

6.Chat的视图
技术分享图片

技术分享图片

代码:Chat视图
@{
ViewBag.Title = "Chat";
}

SignalR








    @section scripts {
    @@

    <script>
        $(function () {
            // 1.ChatHub.cs类
            var chat = $.connection.chatHub;

    // 2.Chat里的[HubName("asd")](1和2一样)
    //var chat = $.connection.asd;
    // 调用addNewMessageToPage显示信息
    chat.client.addNewMessageToPage = function (name, message) {
    // 把消息添加到页面
    //$(‘#discussion‘).append(‘

  • ‘ + htmlEncode(name)
    // + ‘
    : ‘ + htmlEncode(message) + ‘
  • ‘);
    $(‘#discussion‘).append(‘
  • ‘ + $(‘
    ‘).text(name).html()
    + ‘
    : ‘ + $(‘
    ‘).text(message).html() + ‘
  • ‘);
    };
    // 获取昵称
    $(‘#displayname‘).val(prompt(‘昵称:‘, ‘‘));
    // 输入框焦点
    $(‘#message‘).focus();
    // 启动链接
    $.connection.hub.start().done(function () {
    $(‘#sendmessage‘).click(function () {
    // 调用Send方法
    chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val());
    // 清空输入框,并加上焦点
    $(‘#message‘).val(‘‘).focus();
    });
    });
    });
    //
    //function htmlEncode(value) {
    // var encodedValue = $(‘
    ‘).text(value).html();
    // return encodedValue;
    //}

    }

    SignalR网页实时推送

    原文:http://www.cnblogs.com/yanbigfeg/p/7940307.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
    © 2014 bubuko.com 版权所有
    打开技术之扣,分享程序人生!