前端巨火教程：HTML5-SSE

先从零基础开始学习前端先有个计划，知道该学什么技术。做好自己的时间计划，如何快速入门前端那肯定是需要自己不断提高学习效率的，学习过程中尽量把手机调到静音状态，给自己一个安静的学习环境和气氛。快速入门，顾名思义肯定是少走弯路，在学习过程中看看自己身边有没有前端这方面的大神，尽量多问，多交流，如果没有前端，可以多去找一些前端交流群，学习肯定是不能闭门造车的。

研究是一个逐步的过程，前端的研究也不例外。无论是前端开发还是后端开发的学习，都需要我们多动手，既要反复地看书，又要在实践中先学到知识点。前期学习入门快3个月，后期要5-7个月左右，看个人理解速度来评价，只要是入门不管是理解能力，还是学习速度都会有明显的提高。在学习前端的过程中，除了要在练习学习知识点的第一时间，还要在学习的每一个阶段自己创造题目，用所学的知识来实现题目的内容。这对了解和积累一定的项目经验有很大帮助。

HTML5服务器发送事件(Server-SentEvents)

HTML5服务器发送事件（server-sentevent）允许网页获得来自服务器的更新。

Server-Sent事件-单向消息传递

Server-Sent事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter更新、股价更新、新的博文、赛事结果等。

浏览器支持

所有主流浏览器均支持服务器发送事件，除了InternetExplorer。

接收Server-Sent事件通知

EventSource对象用于接收服务器发送事件通知：

var source=new EventSource("demo_sse.php");source.onmessage=function(event){ document.getElementById("result").innerHTML+=event.data + "<br>";};    实例解析：

创建一个新的EventSource对象，然后规定发送更新的页面的URL（本例中是"demo_sse.php"）

每接收到一次更新，就会发生onmessage事件

当onmessage事件发生时，把已接收的数据推入id为"result"的元素中

检测Server-Sent事件支持

以下实例，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持情况：

if(typeof(EventSource)!=="undefined"){ // 浏览器支持 Server-Sent // 一些代码.....}else{ // 浏览器不支持 Server-Sent..}    服务器端代码实例

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如PHP和ASP）。

服务器端事件流的语法是非常简单的。把"Content-Type"报头设置为"text/event-stream"。现在，您可以开始发送事件流了。

<?phpheader('Content-Type: text/event-stream');header('Cache-Control: no-cache');$time = date('r');echo "data: The server time is: {$time}\n\n";flush();?>    ASP代码(VB)(demo_sse.asp):

<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%>    代码解释:

把报头"Content-Type"设置为"text/event-stream"

规定不对页面进行缓存

输出发送日期（始终以"data:"开头）

向网页刷新输出数据

EventSource对象

在上面的例子中，我们使用onmessage事件来获取消息。不过还可以使用其他事件：

事件描述

onopen当通往服务器的连接被打开

onmessage当接收到消息

onerror当发生错误

前端学习永远不会是单枪匹马，需要前人的引领，也需要平台的不断交流与思想碰撞。这能够快速入门，减少走弯路，还能让自己找到问题的根源。