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

    Windows7 x64在Wamp集成环境下安装Memcache,步骤如下: 1.Memcached-win64 下载 (1)最新版本下载:http://blog.couchbase.com/memc ...

  2. Error creating bean with name " "问题

    Spring MVC框架中使用@Autowired自动装配时出现 Error creating bean with name " "问题的解决方式在spring的xml配置文件be ...

  3. Vue 函数

    1.转换为大写字符 .toUpperCase() 2.字符串反转  this.message = this.message.split('').reverse().join('') 3.从index开 ...

  4. spring整合redis客户端及缓存接口设计

    一.写在前面 缓存作为系统性能优化的一大杀手锏,几乎在每个系统或多或少的用到缓存.有的使用本地内存作为缓存,有的使用本地硬盘作为缓存,有的使用缓存服务器.但是无论使用哪种缓存,接口中的方法都是差不多. ...

  5. 大白话理解cookie

    HTTP协议是一个无状态的协议,服务器无法区分出两次请求是否发送自同一服务器. 需要通过会话控制来解决这个问题,会话控制主要有两种方式Cookie 和 Session. Cookie就是一个头,Coo ...

  6. OpenCv: 二维坐标的旋转方程

    1. 可以写成一个矩阵的形式,也可以写成向量的形式: b 为选转角度加pi/2 x1 = x cos(b) - ysin(b) ;  y1 = x sin(b) + y cos(b).

  7. 揭开jQuery的面纱－jQuery选择器简介(二）

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 “$”是选择器不可缺少的部 ...

  8. matlab学习滚动条改变文本数值

    如下分别添加滚动条,静态文本框和可编辑文本框,字体大小改为10,string值按下图,并使用对齐工具 保存名为GUI_02,会自动出来一个.m文件 注意代码一个字都不要错 %定义变量var,保存滚动条 ...

  9. vim/vi编辑器挂到后台ctrl + z

    vim/vi编辑器通过CTRL+z将文件挂在到后台后,如果要再次进入,需通过jobs查看文件的序号,然后通过fg 序号进入文件进行编辑 (BaiduPictureToWord) [master@ins ...

  10. S-HR系统流程