zoukankan      html  css  js  c++  java
  • Javascript中数据实时推送

    数据变化后前端需要更新,有几种方式:(参考http://www.xiaocai.name/post/cf1f9_7b6507)
    
    1.利用setInterval函数,每隔n秒去异步拉取数据。对数据实时性要求不高时可用。
    
    2.Ajax轮询方式推送数据。缺点是服务端需要在死循环中反复查询数据库。(还没有试过这种方式)
    
    3. 利用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(200, { 'Content-type': 'text/html'});
        res.end(fs.readFileSync(__dirname + '/index.html'));
    }).listen(8888, 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 == 13) {
                        event.preventDefault();
                        iosocket.send($('#outgoingChatMessage').val());
                        //$('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
         

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

  • 相关阅读:
    Python——文件操作2
    Python——文件操作1
    Python——集合
    Springboot @Transactional捕获异常事务回滚
    elasticsearch5.2 高亮java代码
    Java static作用
    elasticsearch6.3 自动补齐suggest java代码
    spring boot通过官网创建新项目
    eclipse web工程不能 修改build path
    linux虚拟机添加网卡
  • 原文地址:https://www.cnblogs.com/romanticcrystal/p/9165834.html
Copyright © 2011-2022 走看看