首先在vs上安装signalR相关的库,然后建立MVC项目工程。
1、在MVC项目中新建文件夹ChatHubs,新建signal集线器类ChatHub.cs
2、添加OWINStartup类
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
3、新建signalRClient.js,在js文件中,进行signal页面客户端和服务端的连接、启动:
var testSignalRClient = startSignalRClient().client;
function startSignalRClient() {
var chat = $.connection.chatHub;
$.connection.hub.start().done(function () {
console.log("connection success!");
});
return chat;
}
4、后端signal的服务端使用两种方式将数据推送至前端页面
a、页面的Controller中直接推送方法如下:
public ActionResult clickTest(string text)
{
GlobalHost.ConnectionManager.GetHubContext<ChatHub>().Clients.All.FreshTest(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), text);
return Content("{ \"result\" : \"success\"}");
}
页面添加接收方法:
注意signalRClient.js文件的引用
<div>
<input type="text" maxlength="100" id="txt_output" class="form-control i-text" placeholder="ttt"></input>
<button type="button" class="btn btn-warning dropdown-toggle" id="test_button" onclick="testClick()">测试</button>
<ul id="messageBox"></ul>
<input type="text" maxlength="100" id="result_input" class="form-control i-text" placeholder="ttt"></input>
</div>
<script src="~/js/jquery.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/js/signalRClient.js"></script>
<script type="text/javascript">
$(function () {
testSignalRClient.freshTest = function (name, message) {
//向页面添加消息
$("#result_input").val(name + "===" + message);
}
})
var testClick = function () {
$.ajax({
type: 'get',
url: '/WebTest/clickTest',
data: { text: $('#txt_output').val() },
dataType: "json",
success: function (data) {
console.log("yes");
if (data.result == "success") {
$("#txt_output").val('').focus();
}
}
});
}
</script>
b、利用接口文件管理方法
先建立接口文件,将需要向页面推送数据的方法接口定义好:
public interface ISignalRClientFunction
{
void Fresh1(string time, string text);
void Fresh2(string text);
void Fresh3(string text);
}
在Controller中调用如下:
public ActionResult clickTest(string text)
{
GlobalHost.ConnectionManager.GetHubContext<ISignalRClientFunction>("ChatHub").Clients.All.Fresh1(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), text);
return Content("{ \"result\" : \"success\"}");
}
页面修改方法名称即可:
testSignalRClient.fresh1 = function (name, message) {
//向页面添加消息
$("#messageBox").append('<li><strong style="color:green">' + name + '</strong>:' + message + '</li>');
}