目录
1. 前端轮询获取数据2. SSE(Server sent event)服务器推送数据2-1. 服务端设置2-2. 前端获取
3. WebSocket3-1. 创建websocket服务器3-2. 客户端代码
4. socket.io模块4-1. 服务端4-2. 客户端
1. 前端轮询获取数据
循环ajax请求 ，获取数据；消耗性能，消耗资源，不推荐；
2. SSE(Server sent event)服务器推送数据
使用 server-sent 事件的方法，服务器可以在任何时刻向我们的web页面推送数据和信息；这些被推送进来的信息可以在这个页面上作为事件+data来处理.
2-1. 服务端设置
设置头部
"Content-type","text/event-stream"
res
.setHeader("Content-type","text/event-stream")
返还数据格式
`data:`声明数据开始
`\r\n\r\n`标志数据结尾
res
.write("data:时间是"+new Date()+"\r\n\r\n");
2-2. 前端获取
let source
= new EventSource("/test");
source
.onopen = function () {
console
.log("连接建立...", source
.readyState
);
}
source
.onmessage = function (evnet
) {
console
.log("数据是：", evnet
.data
)
}
source
.error = function (err
) {
return console
.log('err');
}
readyState 代表连接状态
:
CONNECTING (0),
OPEN (1),
CLOSED (2)
3. WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
3-1. 创建websocket服务器
var WebSocketServer
= require('ws').Server
,
wss
= new WebSocketServer({ port
: 8181 });
wss
.on('connection', function (ws
) {
console
.log('client connected');
ws
.on('message', function (message
) {
console
.log(message
);
});
setInterval(() => {
let somedata
= {
name
:"张三",
age
:20
}
ws
.send(JSON.stringify(somedata
));
}, 1000);
});
3-2. 客户端代码
建立握手
var ws
= new WebSocket("ws://localhost:8181");
打开协议
ws
.onopen = function () {}
发送数据到服务端
ws
.send("客户端数据");
关闭协议：关闭协议后不能发送数据
ws
.close();
接收消息
ws
.onmessage = function(e
){
}
4. socket.io模块
4-1. 服务端
const server
= require('http').createServer(app
.callback());
const io
= require('socket.io')(server
);
io
.on("connection",(socket
)=>{
socket
.on("testFn",function(data
){
console
.log(data
);
socket
.emit("clientFn",data
);
})
})
server
.listen(3000);
广播数据
io
.on("connection", (socket
) => {
socket
.on("addData", function (data
) {
socket
.broadcast
.emit("addInputData", data
);
})
})
4-2. 客户端
需要引入socket.io.js文件【socket.io-client / dist / socket.io.js】
<head>
<script src="socket.io.js" type="text/javascript"></script>
</head>
<script>
let socket = io.connect();
socket.emit("addData", val);
socket.on("addInputData",function(data){
console.log(data);
})
</script>
