js 接收后台数据推送

最新推荐文章于 2023-12-02 01:12:07 发布

chengyu_wang

最新推荐文章于 2023-12-02 01:12:07 发布

阅读量8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript学习笔记文章标签：数据前端数据推送

本文链接：https://blog.csdn.net/qq_17347575/article/details/78050966

javascript学习笔记专栏收录该内容

36 篇文章

订阅专栏

本文主要探讨了前端如何实现数据推送，包括基于HTTP长连接的Comet技术、使用WebSocket建立稳定连接进行双向通信，以及SSE(Server-Send Event)允许服务器单向推送内容的方法。通过jQuery、axios和原生JavaScript的示例，阐述了这些技术的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

* 本文章仅包含数据推送,前端部分内容 *

Comet

基于HTTP长连接的服务器推送技术

就是前端向后台发送一个请求,后台进行一个死循环,一直向前端发送信息.

使用jQuery

function conn(){
    $.ajax({
        url:'/action'
        type:'get',
        dataType:'json',
        success:function(data){
            console.log(data)
            conn()
        }
    })
}
conn()

使用axios

function conn(){
    axios.get('/action').then(response=>{
        console.log(response.data)
        conn()
    }).catch(err){
        console.log(err)
    }
}
conn()

使用原生js

function createXHR(){
    var xhr = null 
    if(typeof XMLHttpRequest !== undefined){
        xhr =  new XMLHttpRequest()
        createXHR = function(){
            return new XHLHttpRequest()
        }
    }else{
        try{
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
            createXHR = function(){
                return new ActionXObject('Microsoft.XMLHTTP')
            }
        }catch(e){
                xhr = null
                createXHR = function(){
                    return null
                }
        }
    }
    return xhr
}

var xhr = createXHR()
xhr.open('GET','/action',true)
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 3 && xhr.status === 200){
        console.log(xhr.responsetText)
    }
}

基于WebSocket的推送方案

和后台建立稳定的websocket连接.然后接收,发送数据

var ws = null
function init(){
    ws = new WebSocket('ws://localhost/action')
    ws.onopen = function(){
        if(this.readyState === 1){
            console.log('Connected')
        }
    }
    ws.onmessage = function(ev){
        console.log(ev.data)
    }

}
init()

ws.send('sbzp');

ws.close()

SSE(Server-Send Event)

建立连接,由后台主动向前端推送内容

var source  = null

function init(){
    source = new EventSource('http://localtion/test/action.php')
    source.onopen = function(){
        if(this.readyState === 1){
            console.log('Connected')
        }
    }
    source.onmessage = functino(ev){
        console.lo(ev.data)
    }
    source.onerror = function(){
        console.log('err')
    }
}

init()
source.clos()