web端实时获取服务器数据的三种方法

最新推荐文章于 2024-05-30 16:15:13 发布

俺是编程侠

最新推荐文章于 2024-05-30 16:15:13 发布

阅读量8.6k

点赞数 3

分类专栏：接口轮询 websocket eventSource 文章标签： javascript html node.js

本文链接：https://blog.csdn.net/qq_22091941/article/details/111625480

版权

接口轮询同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

websocket

1 篇文章 0 订阅

订阅专栏

eventSource

1 篇文章 0 订阅

订阅专栏

web端实时获取服务器数据的三种方法

在web端，想要实时获取服务端的消息，一般有3种方法

1、接口轮询：通过客户端循环发送接口获取数据

function send(){
    $.ajax({ 
        url: "/test",  
        success: function(res){
            //处理res
        }
    })
}

setInterval(function(){
    send()
}, 2000)

分析：每两秒钟发一次接口，获取数据进行更新，可能数据并没有改变，也进行了返回，这样会造成了浪费

2、websocket：通过长链接，进行客户端和服务端双向通信，这种比较适合即时聊天通信

客户端

// 创建webSocket
const socket = new WebSocket('ws://localhost:8080');

// 链接成功
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// 接受消息
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

//发送消息
socket.send("你好")

服务端：node

//先npm install ws
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8080 });//服务端口8080
wss.on('connection', function (ws) {
    console.log('服务端：客户端已连接');
    ws.on('message', function (message) {
        //打印客户端监听的消息
        console.log(message);
         ws.send('我也很好');
    });
});

3、eventSource: 只用在服务端推送消息到客户端（IE不支持）

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eventSource</title>
</head>
<body>
    <div id="app"></div>
    <script>
        var eventSource = new EventSource('/event')
        var eventList = document.querySelector('#app')
        eventSource.onopen = function () {
            console.log('链接成功')
        }
        eventSource.onmessage = function(e) {
            // 获取服务端推送的不设置event的值的内容
            var newElement = document.createElement('p')
            newElement.textContent = e.data
            eventList.appendChild(newElement)
        }
        eventSource.onerror = function(error) {
            console.log(error,"error")
        }
        eventSource.addEventListener("myEve", function (event) {
            // 获取服务端推送的event = myEve的内容
        })
    </script>
</body>
</html>

服务端：

//先npm install express
const { response } = require('express');
const express = require('express')
const app = express()
const port = 8099

app.use(express.static(__dirname + '/'));

app.get('/event', (req, res) => {
    try {
        res.writeHead(200, { "Cache-Control": "no-cache", 'Content-Type': 'text/event-stream' });
        setInterval(() => {
            const data = {
                now: +new Date()
            }
            res.write(  // 命名事件
                'event:' + '\n' +
                'data:' + JSON.stringify(data) + '\n' +
                'retry:' + '2000' + '\n' +
                'id:' + '12345' + '\n\n'
              )
        }, 2000)
    } catch (error) {
        console.log(error)
    }
    
})

app.listen(port, () => {
    console.log('监听'+ port + '端口中。。。')
})

分析：要注意event的事件值

总结：接口轮询：比较简单，比较浪费资源，兼容性最好

websocket：双向通信，比较适合聊天这样的双方交互

eventSource：用于消息推送，占用的资源比较少，单方推送，比较适合股票等实时数据更新，IE不支持（可以用其他方式做兼容）

俺是编程侠

关注

3
点赞
踩
61

收藏

觉得还不错? 一键收藏
0
评论
web端实时获取服务器数据的三种方法

web端实时获取服务器数据的三种方法在web端，想要实时获取服务端的消息，一般有3种方法1、接口轮询：通过客户端循环发送接口获取数据function send(){ $.ajax({ url: "/test", success: function(res){ //处理res } })}setInterval(function(){ send()}, 2000)分析：每两秒钟发一次
复制链接

扫一扫