* 本文章僅包含資料推送,前端部分內容 *

Comet

基於HTTP長連線的伺服器推送技術

就是前端向後臺傳送一個請求,後臺進行一個死迴圈,一直向前端傳送資訊.

1. 使用jQuery

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

1. 使用axios

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

1. 使用原生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()