数据变化后前端需要更新，有几种方式：（参考http://www.xiaocai.name/post/cf1f9_7b6507）

.利用setInterval函数，每隔n秒去异步拉取数据。对数据实时性要求不高时可用。

.Ajax轮询方式推送数据。缺点是服务端需要在死循环中反复查询数据库。（还没有试过这种方式）

. 利用websocket推送数据，这是HTML5提供的方法，所以只能支持HTML5标准的浏览器。这种方式可以利用socket.io来实现。

简介一个利用Nodejs和socket.io实现的即时通信的例子，亲测可用。

原文地址：http://blog.sina.com.cn/s/blog_68693f9801010xck.html

嘿嘿，费话就不多说了，先来说一个WebSocket的环境配置,用的是node.js和Socket.IO

首先需要安装node.js,很简单

nodejs下载地址

下载完成后双击安装

CMD打开命令窗口，指定到nodejs的安装目录。

安装Socket.IO也很容易，一条语包搞定，

npm install socket.io，等待安装完成就可以

WebSocket实例-nodejs和socket.io

在nodejs安装目录下，新建http.js(文件名任取)，代码如下：

var fs = require('fs')

    , http = require('http')

    , socketio = require('socket.io');

var server = http.createServer(function(req, res) {

    res.writeHead(, { 'Content-type': 'text/html'});

    res.end(fs.readFileSync(__dirname + '/index.html'));

}).listen(, function() {

    console.log('Listening at: http://localhost:8888');

});

socketio.listen(server).on('connection', function (socket) {

    socket.on('message', function (msg) {

        console.log('Message Received: ', msg);

        socket.broadcast.emit('message', msg);

    });

});

再新建一个index.html，代码如下：

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>

    <script>

        $(function(){

            var iosocket = io.connect();

            iosocket.on('connect', function () {

                $('#incomingChatMessages').append($('<li>Connected</li>'));

                iosocket.on('message', function(message) {

                    $('#incomingChatMessages').append($('<li></li>').text(message));

                });

                iosocket.on('disconnect', function() {

                    $('#incomingChatMessages').append('<li>Disconnected</li>');

                });

            });

            $('#outgoingChatMessage').keypress(function(event) {

                if(event.which == ) {

                    event.preventDefault();

                    iosocket.send($('#outgoingChatMessage').val());

                    //$('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));

原文链接：https://blog.csdn.net/lycjiayou/article/details/25284205

Javascript中数据实时推送的更多相关文章

  1. WebSocket和kafka实现数据实时推送到前端

    一. 需求背景      最近新接触一个需求,需要将kafka中的数据实时推送到前端展示.最开始想到的是前端轮询接口数据,但是无法保证轮询的频率和消费的频率完全一致,或造成数据缺失等问题.最终确定用利 ...

  2. SpringBoot2.0整合WebSocket，实现后端数据实时推送！

    之前公司的某个系统为了实现推送技术,所用的技术都是Ajax轮询,这种方式浏览器需要不断的向服务器发出请求,显然这样会浪费很多的带宽等资源,所以研究了下WebSocket,本文将详细介绍下. 一.什么是 ...

  3. Springboot：SpringBoot2.0整合WebSocket，实现后端数据实时推送！

    一.什么是WebSocket? B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不 ...

  4. 用node.js(socket.io)实现数据实时推送

    在做商品拍卖的时候,要求在商品的拍卖页面需要实时的更新当前商品的最高价格.实现的方式有很多,比如: 1.setInterval每隔n秒去异步拉取数据(缺点:更新不够实时) 2. AJAX轮询方式方式推 ...

  5. javascript跨域传递消息 / 服务器实时推送总结

    参考文档,下面有转载[非常好的两篇文章]: http://www.cnblogs.com/loveis715/p/4592246.html [跨源的各种方法总结] http://kb.cnblogs. ...

  6. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  7. GoEasy实现web实时推送过程中的自动补发功能

    熟悉GoEasy推送的朋友都知道GoEasy推送实现web实时推送并且能够非常准确稳定地将信息推送到客户端.在后台功能中查看接收信息详情时,可有谁注意到有时候在发送记录里有一个红色的R标志?R又代表的 ...

  8. WEB 实时推送技术的总结

    前言 随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控.Web 在线通讯.即时报价系统.在线游戏等,都需要将后台发生的变化主动地.实时地传送到浏览器端,而不需要用 ...

  9. springboot搭建一个简单的websocket的实时推送应用

    说一下实用springboot搭建一个简单的websocket 的实时推送应用 websocket是什么 WebSocket是一种在单个TCP连接上进行全双工通信的协议 我们以前用的http协议只能单 ...

随机推荐

  1. SpringCloud 之 Fegin —— 发送GET、POST请求以及文件上传

    由于项目需要调用其他微服务的数据,首先想到的就是写一个http网络请求的工具类,但是想到在之前看springCloud的时候里面有这个Fegin可以实现,就顺便实践一下,虽然过程有点坎坷,好在都顺利解 ...

  2. C99C新增内容

    继上一篇复合文字之后,今天我们继续谈一谈C99C的新特性. C99标准是继C89标准之后的第二个C语言官方标准,于1999年12月1日正式发布,其中对数据类型(增加了对_Bool),关键字(增加了in ...

  3. 跳出双重for循环的案例__________跳出了，则不再执行标签ok下的for循环代码

    ok: for (int i = 0; i < 3; i++) { for (int j = 0; j < 4; j++) { System.out.print("*" ...

  4. Spring Boot (20) 拦截器

    动态资源和静态资源 拦截器可以算是aop的一种实现,专门拦截对动态资源的后台请求,也就是拦截对控制层的请求,主要用于判断用户是否有权限请求后台.拦截器不会拦截静态资源,如spring boot默认静态 ...

  5. 【转载】【翻译】JavaScript Scoping and Hoisting--JS作用域和变量提升的探讨

    原文链接:http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting 你知道下面的JavaScript代码执行后会aler ...

  6. Android环境的搭建遇到的问题和解决方案

    安卓环境的搭建,我花了将近一天的时间,在最后终于找到了一个比较好的方案. 第一个问题是安卓的官网(http://developer.android.com)很难登录.SDK和ADT都是需要在官网上下载 ...

  7. poj1328 Radar Installation 区间贪心

    题目大意: 在X轴选择尽量少的点作为圆心,作半径为d的圆.使得这些圆能覆盖所有的点. 思路: 把每个点都转化到X轴上.也就是可以覆盖这个点的圆心的位置的范围[a,b].然后按照每个点对应的a从小到大排 ...

  8. 基于 CC2530 的温度采集系统（未定稿）

    前言 最近在自学 Zigbee,每天的主要是任务是:看博客,看 CC2530 的 datasheet 和实践,熟悉片上的 SFR 以及控制板子. 学和做内容包括:IO.外部中断.Timer1/3/4. ...

  9. ui界面设计

    UI即User Interface(用户界面)的简称,指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单.自由,充分体现软件的定位 ...

  10. 【转载】Servlet中的request与response

      一.HttpServletRequest概述   1.1.HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时, ...