数据变化后前端需要更新，有几种方式：（参考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. hdu 3037Saving Beans(卢卡斯定理)

    Saving Beans Saving Beans Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  2. 浅谈自学Python之路（购物车程序练习）

    购物车程序练习 今天我们来做一个购物车的程序联系,首先要理清思路 购物车程序需要用到什么知识点 需要用到哪些循环 程序编写过程中考虑值的类型,是int型还是字符串 如果值为字符串该怎么转成int型 用 ...

  3. BZOJ 3727 DP？推式子..

    思路: 设$sum[i]表示i的子树中a[i]的和$ $b[1]=\Sigma a[i]*dis[i] = \Sigma _{i=2} ^n sum[i]$ $b[x]-b[fa[x]]=sum[1] ...

  4. HTML <!DOCTYPE>标签

    一般一个基本html页面的结构,如下代码所示: <html> <head> <title>我是基本的页面结构</title> </head> ...

  5. String和八种基本数据类型互相转换

    //String转换为对应的八种基本数据类型 String str="100"; //Value out of range. Value:"200" Radix ...

  6. create-react-app 中设置反向代理、项目打包资源引入路径设置及 map 文件

    1.配置反向代理 (1)porxy 配置一个代理 修改package.json文件 "proxy":"http://teng.com/website/web", ...

  7. 复习java第五天(枚举、Annotation(注释) 概述)

    一.枚举 传统的方式: •在某些情况下,一个类的对象是有限而且固定的.例如季节类,只能有 4 个对象 •手动实现枚举类: —private 修饰构造器. —属性使用 private final 修饰. ...

  8. c# ado.net eftity framework 返回多表查询结果

    public static IQueryable GetWeiXinTuWenList() { using (var Model = new Model.WeiXinEntities()) { var ...

  9. [转]常用Git命令清单

    原文地址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 作者: 阮一峰 日期: 2015年12月 9日 我每天使用 Git , ...

  10. 学习廖雪峰的Python教程之第一个Python程序

    一.命令行模式和Python交互模式的区分 命令行模式: Python交互模式 二.文本编辑器 1.绝对不能用Word和Windows自带的记事本.Word保存的不是纯文本文件,而记事本会自作聪明地在 ...