【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)
来源:互联网 发布:淘宝网店进销存 编辑:程序博客网 时间:2024/04/27 23:31
【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)
服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务端实时推送数据到浏览器端。相对于与之类似的WebSocket 技术来说,服务器推送事件的使用更简单,对服务器端的改动也比较小。对于某些类型的应用来说,服务器推送事件是最佳的选择。
首先,确保浏览器支持HTML5且不是IE,这个可能就是好SSE技术的一个局限,不过,既然作为HTML5的一个规范,我们在学习HTML5的时候,还是有很多场景可以运用SSE技术的。
下面,通过分析,来实现即时聊天的功能。
首先,我们需要一个页面来展示聊天内容,这个页面布局自行设计。
然后,我们要要监听服务器的推送并展示内容,代码如下:
其中展示的部分根据业务自行处理,这样客户端就可以顺利获取服务器推送的内容了。
然后,当用户输入聊天内容的时候,通过AJAX提交内容到数据库即可。
数据库怎么设计呢?
我们通过一个简易表即可实现,假设有一张test表,有mid(消息ID),nickname(用户昵称),content(聊天内容),time(聊天时间)这四个字段。
服务器怎么处理呢?
这里服务器用简易而强大的PHP作为数据推送的语言。
//通过header发送信息
header(“Content-Type:text/event-stream”);
header(“Cache-Control:no-cache”);
//省略数据查询过程
foreach ($rows as $k => $v) {
$time = date(‘Y-m-d’,$v[‘time’]);
echo “data:[$time]{$v[‘nickname’]}:{$v[‘content’]}
\n”;
}
echo “retry:1000\n”;
echo “\n\n”;
ob_flush();
flush();
这样,就可以每隔1秒向客户端推送一次内容了,为什么要用retry设置为1秒呢?因为HTML5默认是3秒,等待时间比较长,不太科学,所以用retry设置为1秒。
上面的echo中,数据的格式必须啊严格按照 data:<内容>\n\n
的格式,否则客户端接受不了数据哦,那么就是一个失败的聊天室功能。
- 【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)
- SSE服务器推送事件
- IT界 PHP实现 HTML5数据推送SSE原理
- Beego实现html5的SSE(Server-Send Event)推送功能
- 使用java websocket简单实现即时聊天
- XMPP 即时聊天服务器
- iOS通过SocketRocket实现websocket的即时聊天
- websocket实现即时聊天
- DWR Server Push(服务器推技术) 实现即时聊天
- 关于即时聊天的comet,服务器推的实现策略
- IOS -- XMPPFramework 即时聊天(3:XMPPFramework 实现连接服务器)
- SSE技术详解:一种全新的HTML5服务器推送事件技术
- rest推送实现--jesey SSE
- 基于百度推送的第三方服务器android即时聊天系统
- 【HTML5】简单实现QQ聊天气泡效果
- android简单即时聊天sdk
- php即时聊天实现方案
- socket实现WP7即时聊天
- 大型网站架构——【负载均衡和LVS】
- Laplacian算子图像提升
- hive优化总结经验
- USB 3.0规范中译本 第3章USB 3.0体系结构概览
- 网络世界的法律——OSI
- 【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)
- ios开发之View属性hidden, opaque, alpha, opacity的区别
- 《大型网站技术架构》读书笔记四:瞬时响应之网站的高性能架构
- OpenCV Tutorial: 固定閾值(threshold)
- USB 3.0规范中译本 第4章超高速数据流模型
- Don't dereference a collection with cascade="all-delete-orphan" ,这是14年遇到的问题,最近在博客上进行整理汇总
- python 操作mysql
- JAVA学习总结之JVM概述
- 创建数据库指定编码集