关于js实现SSE的简单实践
2016-02-19 18:06
435 查看
看了服务器推送,了解除了服务器轮询和websocket外还有一样东西叫做SSE(Server Send Event),非常好用而且简单。不过是个HTML5才支持的方法,兼容性方面打了折扣。不过的确是一种比较实用的技术。
直接贴代码,服务器用go,网上很多是用php的,对php不愿学的飘过...
有些坑先说说:
1、服务器端返回的内容一定要“data:”开头,api要求这样也没有什么好说的。
2、返回内容最后要两个换行 "\n\n"或者"\r\n\r\n"。如果不加换行也接收不了消息。
服务器go代码:
package main
import (
"net/http"
"log"
"fmt"
"time"
)
func jsonResponseHandler(w http.ResponseWriter,r *http.Request){
w.Header().Set("Access-Control-Allow-Origin", "*")//允许访问所有域
w.Header().Add(`Access-Control-Allow-Headers`,`Content-Type`)//header的类型
w.Header().Set(`Content-Type`,`text/event-stream;charset=utf-8`)//返回数据格式是json
w.Header().Set("Cache-Control","max-age=0")
//w.Header().Set(`Transfer-Encoding`,`identity`)
fmt.Fprintf(w,"data:"+time.Now().Format("2006-01-02 15:04:05")+"\n\n")
fmt.Println("data:"+time.Now().Format("2006-01-02 15:04:05"))
}
func main() {
http.HandleFunc("/",jsonResponseHandler)
err := http.ListenAndServe(":9091",nil)
if err!=nil{
log.Fatal("ListenAndServe:",err)
}
}
js代码:
var source;
function init(argument){
source = new
EventSource("http://172.17.9.225:9091")
source.onopen =function(e){
console.log("连接已经建立:",this.readyState );
//document.getElementById("datadiv").innerText += "连接已经建立:" + this.readyState +"\n";
};
source.onmessage =function(event){
console.log("服务器数据:",event.data)
document.getElementById("datadiv").innerText+=
"服务器数据:" +
event.data + "\n";
};
source.onerror =function(err){
};
}
init();
html 页面代码:
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"
/>
<title></title>
</head>
<body>
<div id="datadiv">
</div>
</body>
<script
src="js/index.js"
type="text/javascript" charset="utf-8"></script>
</html>
直接贴代码,服务器用go,网上很多是用php的,对php不愿学的飘过...
有些坑先说说:
1、服务器端返回的内容一定要“data:”开头,api要求这样也没有什么好说的。
2、返回内容最后要两个换行 "\n\n"或者"\r\n\r\n"。如果不加换行也接收不了消息。
服务器go代码:
package main
import (
"net/http"
"log"
"fmt"
"time"
)
func jsonResponseHandler(w http.ResponseWriter,r *http.Request){
w.Header().Set("Access-Control-Allow-Origin", "*")//允许访问所有域
w.Header().Add(`Access-Control-Allow-Headers`,`Content-Type`)//header的类型
w.Header().Set(`Content-Type`,`text/event-stream;charset=utf-8`)//返回数据格式是json
w.Header().Set("Cache-Control","max-age=0")
//w.Header().Set(`Transfer-Encoding`,`identity`)
fmt.Fprintf(w,"data:"+time.Now().Format("2006-01-02 15:04:05")+"\n\n")
fmt.Println("data:"+time.Now().Format("2006-01-02 15:04:05"))
}
func main() {
http.HandleFunc("/",jsonResponseHandler)
err := http.ListenAndServe(":9091",nil)
if err!=nil{
log.Fatal("ListenAndServe:",err)
}
}
js代码:
var source;
function init(argument){
source = new
EventSource("http://172.17.9.225:9091")
source.onopen =function(e){
console.log("连接已经建立:",this.readyState );
//document.getElementById("datadiv").innerText += "连接已经建立:" + this.readyState +"\n";
};
source.onmessage =function(event){
console.log("服务器数据:",event.data)
document.getElementById("datadiv").innerText+=
"服务器数据:" +
event.data + "\n";
};
source.onerror =function(err){
};
}
init();
html 页面代码:
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"
/>
<title></title>
</head>
<body>
<div id="datadiv">
</div>
</body>
<script
src="js/index.js"
type="text/javascript" charset="utf-8"></script>
</html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总