【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
的格式,否则客户端接受不了数据哦,那么就是一个失败的聊天室功能。