一、SignalR入门

发布时间：2020-05-28 09:42:06 作者：logyue
来源：网络阅读：1315

准备：

开发工具：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实现消息的收发。

效果图展示：

一、SignalR入门

开发步骤

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

一、SignalR入门

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

一、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库，如下图：

一、SignalR入门

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

一、SignalR入门

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>

×××

一、SignalR入门

相关阅读