10-数据实时更新

最新推荐文章于 2022-12-01 16:51:40 发布

罐子丶

最新推荐文章于 2022-12-01 16:51:40 发布

阅读量246

点赞数

分类专栏： # node.js学习随记文章标签： websocket socket nodejs

本文链接：https://blog.csdn.net/qq_41219001/article/details/109189397

版权

node.js学习随记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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);
}
// console.log(source)
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){
	// console.log(e.data);
}

4. socket.io模块

4-1. 服务端

const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);
io.on("connection",(socket)=>{
	// 服务端接收名为"testFn"的数据
    socket.on("testFn",function(data){
        console.log(data);
        // 服务端发送名为"clientFn"的数据
        socket.emit("clientFn",data); 
    })
})
server.listen(3000);

广播数据

io.on("connection", (socket) => {
    socket.on("addData", function (data) {
        // 服务端接收客户端发来的名为"addData"的数据，并包装成名为"addInputData"的数据发送给客户端
        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("/");
	let socket = io.connect();
	
	// 客户端发送名为"addData"的数据
	socket.emit("addData", val);
	
	// 客户端接收服务端发来的名为"addInputData"的数据
    socket.on("addInputData",function(data){
        console.log(data);
    })
</script>