【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)

【HTML5学习研究】简单服务器推送(通过SSE实现即时聊天)

时间 2015-08-15 20:00:58 双木博客

原文  http://blog.smyime.com/?p=74

主题 HTML5

服务器推送事件（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 的格式，否则客户端接受不了数据哦，那么就是一个失败的聊天室功能。