数据变化后前端需要更新，有几种方式：（参考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. Appium - xpath

    基本属性定位 以淘宝app为例,定位左上角扫一扫按钮 1.可以通过text文本定位到 //*[@text='text文本属性'] # 定位text driver.find_element_by_xpa ...

  2. WebApi中对请求参数和响应内容进行URL编码解码

    项目经测试,发现从IE提交的数据,汉字会变成乱码,实验了网上很多网友说的给ajax加上contentType:"application/x-www-form-urlencoded; char ...

  3. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

  4. C# 多线程系列（四）

    Parallel类 Parallel类定义了for.foreach和invoke的静态方法.Parallel类使用多个任务,因此使用多个线程来完成这个作业. Parallel.For Parallel ...

  5. 快速搭建tab

    1. 布局文件代码: <?xml version="1.0" encoding="utf-8"?> <android.support.v4.a ...

  6. Entity FrameWork 操作使用详情

    Entity FrameWork 是以ADO.net为基础发展的ORM解决方案. 一.安装Entity FrameWork框架 二.添加ADO.Net实体数据模型 三.EF插入数据 using Sys ...

  7. 竞品分析」项目协作管理平台-Teambition和CORNERSTONE--深度体验

    一.分析目的 通过分析2B产品中的团队协作管理软件的对比分析,用于为公司团队协作软件的选型做产考. 二.竞品归属市场概况 2.1.目标用户群及需求 主要面向企业用户,用于解决企业不同地域以及不同职能部 ...

  8. React Native未来导航者：react-navigation 使用详解

    该库包含三类组件: (1)StackNavigator:用来跳转页面和传递参数 (2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:侧滑 ...

  9. 08 Django组件-Forms组件

    Django的Forms组件主要有以下几大功能: 页面初始化,生成HTML标签 校验用户数据(显示错误信息) HTML Form提交保留上次提交数据 一.小试牛刀 1.定义Form类 from dja ...

  10. Java 各级注解及@Autowired注入为null解决办法

    1.@controller 控制器 用于标注控制层,相当于struts中的action层. 2.@service 服务层 用于标注服务层,主要用来进行业务的逻辑处理. 3.@repository DA ...