准备：
开发工具：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>: ‘ + 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>
时间： 2024-10-21 02:45:52