准备：
开发工具：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>×××
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
