javascript之数据推送

我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息,

例如:股票行情分析、聊天室和网页在线游戏等。

怎么做到呢?

最笨的方法: 前端需要隔一段时间向服务器发送一次ajax,请求成本太昂贵呀,就好比,你每次约炮,都得开房,还是租一个便宜点儿房子合算。

所以不能这么做。

1.comet

原理:comet是基于HTTP长连接的服务器推送技术,是一种web应用架构,服务器会主动以异步的方式向客户端程序推送数据,而不需要客户端显示的发出请求,

当前端与服务器连接完一次后,保持长链接,让服务器来做推送,服务器利用缓存技术来实现

comet非常适合事件驱动的web应用,以及对交互性与实时要求很强的应用。

前端js代码

var xhr = (function(){
    if(typeof XMLHttpRequest != undefined){
           return new XMLHttpRequest
    }else{
           return new ActiveXObject("Microsoft.XMLHttp")
    }
})();

xhr.open("GET", url, true);
xhr.send(data);

xhr.onreadystatechange = function(){
      if(xhr.readyState == 3){
        if(xhr.status == 200){
                 xhr.responseText;
            }
      }
};

后台代码(这里用PHP实现)

<?php
        //设置响应输出头
        header("Content-Type:application/json;charset=UTF-8");
    header("Cache-Control:max-age=0");//去除缓存
        $i= 0;
        while($i<9){
             $i++;
             $res = ["success"=>"ok","text"=>i] ;//结果
             echo json_encode($res);
             //刷新页面流,不缓存
             ob_flush();
             flush();结束流
        }
?>

2.websocket

   没有Network请求,节省资源

   前端:

var socket,state=-1;
function connect(){
    console.log("Connection Begin:");
    if(socket == null || socket.readyState != 1){
        socket = new WebSocket(host);
    }

    socket.onerror = function(){
        console.log("Connection error!")
    }

    socket.onopen = function(e){
        console.log("Connection isavaliable!");
    }

    socket.onmessage = function(e){
        console.log("Receive ServerMessage Beign:");
        document.querySelector("#txtarea").innerHTML = e.data;
        console.log("Receive ServerMessage End!");
    }

    socket.onclose = function(e){
        console.log("Connection closed!");
        document.querySelector("#txtarea").innerHTML += "/n" + event.wasClean + ";" + event.code + ";" + event.reason;
    }
}

function send(){
    if(socket.readyState == 1){
        console.log("Send Message Begin:");
        var text = document.querySelector("#text").value;
        var message = {
            time : new Date(),
            clientId : "049";
        };
        if(text=="" || message == null){
            console.log("No date to send!");
            return;
        }
        socket.send(JSON.stringify(message));
        socket.send(text);
        console.log("Send Message End!");
    }else{
        console.log("Connection not aviliable,please create connection!");
    }
}

/**
 * Web Socket 任何时候都可以关闭,没有什么限制
 * 可以根据需求进行控制
 */
function disconnect(){
    console.log("Close Connection Begin:");

    socket.close();
}

   后端:需要使用node,个人不懂node,只是看了一点点,如果写错了,请见谅! 去他地把,管她好不好看呢,自己约的炮,含着泪也得打完

var sys = require(‘sys‘);
var ws = require(‘websocket‘);
var server = ws.createServer();
server.addEventListener(‘connection‘,function(conn){//当客户端接入时
    conn.send(‘hi,‘+conn.id);//向客户端发送消息
    conn.addEventListener(‘message‘,function(msg){//当收到客户端发来的消息时
        console.log(‘Recieved message :‘ + msg);
        var i=0;
        while(i<9){
            i++;
            server.broadcast(i);//向所有客户端广播消息
            conn.send(i);
        }
    });
});
server.addEventListener(‘close‘,function(conn){
    server.broadcast(‘Disconnected: ‘ + conn.id);
});
server.listen(8000);
console.log(‘Hello,Server is Running:8000‘);

3.SSE方式

   SSE: Server - Send Event   浏览器新API

   不需要ajax,可以实现实时动态刷新数据

var source = new EventSource(url);
function init(){
     source.onopen = function(){
         console.log(‘connect:‘ + this.readyState);
     }
     source.onmessage = function(e){
         console.log(‘Recieve:‘ + e.data);
    }
     source.onerror = function(e){
         console.log(‘error‘);
    }
}

init();

后台:还是php,请叫我P哥

<?php
    //设置响应输出头
    header("Content-Type:text/event-stream;charset=UTF-8");
    header("Access -Control-Aollow-Origin:http:/IP/");
    echo "data:现在是北京时间:".date(‘H:i:s‘)."<br/>"
?>

随着H5的发展,个人相信,这种数据推送技术会得到更广的应用

   

 

时间: 2024-10-13 20:00:44

javascript之数据推送的相关文章

使用Node.js实现数据推送

业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式处理Ajax请求并返回数据,在学校的时候实验室的项目一直都采用轮询,因为它最保险也最容易实现.但轮询带来的通信资源的浪费是无法忽视的,无论数据是否改变,都照常发送请求并响应,而且每次HTTP请求都带有很长的头部信息. 2. Comet的概念是长连接,客户端发送请求后,后端将连接保持下来,直到连接

HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送(C#示例)

传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据推送).基于数据推送是这样的,当数据源有新数据,它马上发送到客户端,不需要等待客户端请求.这些新数据可能是最新闻,最新股票行情,来自朋友的聊天信息,天气预报等. 数据拉与推的功能是一样的,用户拿到新数据.但数据推送有一些优势. 你可能听说过Comet, Ajax推送, 反向Ajax, HTTP流,W

[HTML5_Web Workers+Sockets]HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

前言 HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API, 跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递. 使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术. 跨文档消息传输 在之前我们若想跨域获取信息会花很多功夫,现在只要获取网页所在窗口对象实例变可以实现互相通信. 首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听: window.addevntListene

HTML5数据推送应用开发

javascript表达行为,css表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数据推送技术的产生. SSE是一种允许服务器端向客户端推送新数据(简称数据推送)的HTML5技术.数据推送有两种替代方案:无更新方案和数据拉取方案. 无更新方案: 加载完毕HTML之后,得到一个HTML页面,之后浏览器会请求图片.CSS文件和JavaScript文件等,他们都是浏览器可以缓存的静态文件

HTML5数据推送SSE原理及应用开发

JavaScript表达行为,CSS表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数据推送技术的产生. SSE是一种允许服务器端向客户端推送新数据(简称数据推送)的HTML5技术.数据推送有两种替代方案:无更新方案和数据拉取方案.http://tieba.yunxunmi.com/tieba-html5.html 无更新方案: 加载完毕HTML之后,得到一个HTML页面,之后浏览器

C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何去推送复杂的数据,以及推送一个实时的图表数据,文本为我原创,转载请注明出处:Richard.Hu,先上一堆乱七八糟的说明先: SignalR的官方地址是: https://www.asp.net/signalr 网上给出例子是一个聊天的例子,官网地址是:https://docs.microsoft.

一种家庭数据入口推广策略,全新的数据推送方式

目前个人消费大块数据(如视频.大型软件游戏等)的场合主要是在家庭,加上智能家居等需求,家庭数据入口有比较大的应用前景.现在推广数据入口的方式主要是智能路由器产品.但是推广速度不是很理想.一是免费送不起:二是个性化消费品涉及硬盘失效.产品更新及个人爱好等,不适合房产开发商统一部署:三是推送数据的能力比较弱.这里讨论另一种推送方式. 假设你是推广者,我是消费者,开始讲故事. 首先你跟一家小区宽带或者二级运营商(后面再讲大运营商)合作了.他们在一个出口上会有大量用户进入公网.从这里上公网的流量对他们是

C# 数据推送 实时数据推送 轻量级消息订阅发布 多级消息推送 分布式推送

前言 本文将使用一个NuGet公开的组件技术来实现数据订阅推送功能,由服务器进行推送数据,客户端订阅指定的数据后,即可以接收服务器推送过来的数据,包含了自动重连功能,使用非常方便 nuget地址:https://www.nuget.org/packages/HslCommunication/            github地址:https://github.com/dathlin/HslCommunication                                 如果喜欢可以s

Zzzj Submit:WordPress 百度熊掌号/原创保护文章数据推送插件 V3.4

Zzzj Submit:WordPress 百度熊掌号/原创保护文章数据推送插件 V3.4 Zzzj Submit是一款根据百度站长平台原创保护提交接口而升级开发的WordPress插件,目前插件已经开始适配百度熊掌号(原百度官方号)的数据提交内测,可实现用户自动自主的将文章推送至官方号及原创保护文章推送,支持定时文章推送. 即日起"Zzzj Submit"插件将从WordPress百度原创保护提交插件升级为WordPress百度熊掌号数据提交插件,由于百度熊掌号目前属于内测期间,故该