SignalR网页实时推送

简介: 1.新建项目,选择mvc4 Wed应用程序,选择Internet,视图引擎:Razor2.在控制器中添加并添加上视图3.引用(install-package Microsoft.AspNet.SignalR)4.

1.新建项目,选择mvc4 Wed应用程序,选择Internet,视图引擎:Razor
img_1581b895878cad34b2f5cbf9cea2ee41.png

2.在控制器中添加
img_07c65487fbe24a1d416d16eaf9a582e9.png

并添加上视图

3.引用(install-package Microsoft.AspNet.SignalR)
img_a7440de847296b55104dea9b0c7aa9a1.png

4.添加Startup
img_e62184517bd9d20570f79fbd91b0bd98.png

img_b2b664e997509ae47499589705b71663.png

项目名

5.新建Hubs文件夹,添加ChatHub类
img_f8d875014cf8eea660fa4ee5160b3a6d.png

6.Chat的视图
img_d7106cc912f211690b034d0242d4dc74.png

img_317b989eded316c63d6aa58574abbabe.png

代码:Chat视图
@{
ViewBag.Title = "Chat";
}

SignalR








@section scripts {
@ @

<script>
    $(function () {
        // 1.ChatHub.cs类
        var chat = $.connection.chatHub;

// 2.Chat里的[HubName("asd")](1和2一样)
//var chat = $.connection.asd;
// 调用addNewMessageToPage显示信息
chat.client.addNewMessageToPage = function (name, message) {
// 把消息添加到页面
//$('#discussion').append('

' + htmlEncode(name)
// + '
: ' + htmlEncode(message) + '');
$('#discussion').append(' ' + $('
').text(name).html()
+ '
: ' + $('
').text(message).html() + '');
};
// 获取昵称
$('#displayname').val(prompt('昵称:', ''));
// 输入框焦点
$('#message').focus();
// 启动链接
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// 调用Send方法
chat.server.send($('#displayname').val(), $('#message').val());
// 清空输入框,并加上焦点
$('#message').val('').focus();
});
});
});
//
//function htmlEncode(value) {
// var encodedValue = $('
').text(value).html();
// return encodedValue;
//}

}

作者:YanBigFeg —— 颜秉锋

出处:http://www.cnblogs.com/yanbigfeg

本文版权归作者和博客园共有,欢迎转载,转载请标明出处。如果您觉得本篇博文对您有所收获,觉得小弟还算用心,请点击右下角的 [推荐],谢谢!

目录
相关文章
|
网络协议 计算机视觉
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
|
4月前
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
67 1
|
10月前
|
监控 JavaScript API
局域网监控软件的实时通知系统:利用Node.js和WebSocket实现即时消息推送
本文介绍了如何使用Node.js和WebSocket构建局域网监控软件的实时通知系统。实时通知对于网络安全和家庭监控至关重要,能即时发送监控数据变化的通知,提高响应速度。通过Node.js创建WebSocket服务器,当数据变化时,监控软件发送消息至服务器,服务器随即推送给客户端。此外,还展示了如何利用Node.js编写API,自动将监控数据提交到网站,便于用户查看历史记录,从而提升监控体验。
228 3
|
8月前
|
缓存 前端开发 JavaScript
PWA离线访问与推送通知实现的技术探讨
【7月更文挑战第18天】PWA通过Service Worker和一系列现代Web技术,实现了离线访问和推送通知等强大功能,为用户提供了类似于原生应用程序的体验。开发人员在构建PWA时,需要熟悉Service Worker、Web App Manifest和HTTPS协议等基础知识,并掌握离线缓存、推送通知等功能的开发实践。随着PWA技术的不断发展和完善,我们有理由相信,
|
10月前
|
数据采集 存储 JavaScript
提升数据采集技能:用 Axios 实现的 Twitter 视频下载器全面解析
Twitter上的视频内容丰富多样,涵盖了新闻、娱乐、教育、体育等各个领域。这些视频内容对于数据科学家来说,是一种有价值的数据形式,可以用于进行内容分析、情感分析、话题挖掘、事件检测等多种任务。然而,Twitter标准API并没有提供直接下载视频的功能,这给数据采集带来了一定的困难。为了克服这一挑战,我们将使用Axios库,结合代理IP技术,构建一个高效的视频下载器。
196 1
提升数据采集技能:用 Axios 实现的 Twitter 视频下载器全面解析
|
JavaScript
js仿通知栏新消息实时推送更新效果
js仿通知栏新消息实时推送更新效果
86 0
|
缓存 前端开发 Cloud Native
《PWA实战:如何为你的网站增加离线功能和推送通知》
《PWA实战:如何为你的网站增加离线功能和推送通知》
391 0
|
JSON Java 数据库连接
【开发一个简单的音乐播放器+服务端】【一】
【开发一个简单的音乐播放器+服务端】【一】
176 0
|
缓存 Android开发
【开发一个简单的音乐播放器+服务端】【二】
【开发一个简单的音乐播放器+服务端】【二】
117 0
|
移动开发 网络协议 前端开发
为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统
websocket是个啥? webSocket是一种在单个TCP连接上进行全双工通信的协议 webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输
为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统