码迷,mamicode.com
首页 > 其他好文 > 详细

一、SignalR入门

时间:2015-05-16 18:42:15      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:visual   jquery   signalr   

准备:

      开发工具:visual studio 2013

      使用框架:SignalR、Jquery

正文

  • 概述

    基于ASP.NET web 应用程序创建并引用SignalR 和JQuery框架简单实现文字聊天


        开发任务

              A、创建一个空的ASP.NET web 项目

              B、引用SignalR 和Jquery框架

              C、创建一个集线器类,以将内容推送到客户端。

            D、创建一个OWIN Startup类,配置启动。

            E、在Web中使用SignalR jQuery实现消息的收发



    效果图展示:

技术分享

技术分享


  • 开发步骤

    1、在 Visual Studio 中创建一个 ASP.NET Web 应用程序。

技术分享

2、解决方案资源管理器中,右键单击项目,选择添加|那么 SignalR 集线器类 (v2)。命名ChatHub.cs类并将其添加到该项目。此步骤将创建ChatHub类,并向项目中添加一组脚本文件和支持那么 SignalR 的程序集引用。

技术分享

3、将ChatHub类替换如下:

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

namespace SignalRChatDemo
{
    public class ChatHub : Hub
    {
        /// <summary>
        /// 发送消息
        /// </summary>
        /// <param name="name">姓名</param>
        /// <param name="message">消息内容</param>
        public void Send(string name, string message)
        {
            // 回调客户端方法CallMessage通知客户端
            Clients.All.CallMessage(name, message);
        }
    }
}

4、在解决方案资源管理器中,右键单击该项目,然后单击添加OWIN Startup启动类Startup新类的名称并单击确定。

注:如果您使用的 Visual Studio 2012,OWIN Startup启动类模板将不可用。您可以添加一个名为Startup相反的普通

5、更改为以下内容的新的启动类。

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

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

namespace SignalRChatDemo
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }
}

6、引用SignalR 和Jquery框架

在NuGet管理中输入JqueryUI ,安装JQuery UI库,如下图:

技术分享

安装完成后可以看到我们需要的两个框架库了,如下图:

技术分享

7、编写Web页面,实现聊天

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #07325e;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
        body{
            color:white;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="发送" />
        <input type="hidden" id="name" />
        <ul id="msgList"></ul>
    </div>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script src="signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            // 定义一个代理并引用Hub。注意:JS需要使用驼峰式大小写
            var chat = $.connection.chatHub;
            // 创建一个客户端方法,C# ChatHub类中的方法需要和客户端方法保持一致,C# ChatHub类才能调用到客户端方法
            chat.client.CallMessage = function (name, message) {
                // 对HTML进行编码.
                var encodedName = $(‘<div />‘).text(name).html();
                var encodedMsg = $(‘<div />‘).text(message).html();
                $(‘#msgList‘).append(‘<li><B>‘ + encodedName
                    + ‘</B>:&nbsp;&nbsp;‘ + encodedMsg + ‘</li>‘);
            };
            // 输入需要在客户端显示的用户名
            $(‘#name‘).val(prompt(‘亲输入的您的姓名:‘, ‘‘));
            $(‘#message‘).focus();
            // 启动一个连接
            $.connection.hub.start().done(function () {
                $(‘#sendmessage‘).click(function () {
                    // 回调服务的的send方法并传入参数
                    chat.server.send($(‘#name‘).val(), $(‘#message‘).val());
                    $(‘#message‘).val(‘‘).focus();
                });
            });
        });
    </script>
</body>
</html>

源码下载

本文出自 “酷码-程序人生” 博客,请务必保留此出处http://longjiam.blog.51cto.com/3406054/1651816

一、SignalR入门

标签:visual   jquery   signalr   

原文地址:http://longjiam.blog.51cto.com/3406054/1651816

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!