威尼斯人线上娱乐

io实时投票系统,Mobile和PhoneGap混合开发

11 4月 , 2019  

在gemfile中投入(前面版本别丢)

一在html 中的使用js有二种艺术

其叁节,接上头的二节,那里我们进入socket.io的拍卖
威尼斯人线上娱乐 ,首先,大家在./bin/www文件里进入

一、到jquerymobile.com下载最新的ZIP File,解压得到其JavaScript,
CSS和images。放到/assets/www/js目录下。如图:【在那之中jquery.js是从demos的js目录里复制出来的,上一篇文章中的cordova.js也移到了js目录下】

gem 'rails_kindeditor', '~> 0.5.0'
1.1 在html 用script 标签直接把js代码加到html文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello world')
    </script>
</body>
</html>
var routes = require('../routes/index');

var server = http.createServer(app);
//在server下加入socket.io的方法
/**
 * Create WebSocket server
 */
var io = require('socket.io').listen(server);
io.sockets.on('connection', routes.vote);

 威尼斯人线上娱乐 1
 

   $ bundle  

壹.2 在html标签用事件出席js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body onload="alert('hello world')">
</body>
</html>

此间大家投入了socket的监听,并把socket的监听交给routes.vote来处理,在route/index.js中参加

贰、在index.html中投入如下代码:

开创布局文件,并且引进js

1.三 用script 标签进入外部的js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body >
<script src="../a.js"></script>  
</body>
</html>

// a.js 
alert('hello world')
router.vote = function(socket){
    socket.on('send:vote', function(data){
        var ip = socket.handshake.headers['x-forwarded-for'] || socket.handshake.address;
        //查找当前投票
        Poll.findById(data.poll_id, function(error, poll){
            var choice = poll.choices.id(data.choice);
            choice.votes.push({ip: ip});
            poll.save(function(error, doc){
                var theDoc = {
                    question: doc.question, 
                    _id: doc._id, 
                    choices: doc.choices,
                    userVoted: false, 
                    totalVotes: 0
                };
                //查询当前IP是否已经投过票
                poll.choices.forEach(function(choice, index) {
                    choice.votes.forEach(function(vote, index) {
                        theDoc.totalVotes++;
                        theDoc.ip = ip;
                        if(vote.ip === ip){
                            theDoc.userVoted = true;
                            theDoc.userChoice = { _id: choice._id, text: choice.text };
                        }
                    });
                });

                socket.emit('myvote', theDoc);
                socket.broadcast.emit('vote', theDoc);
            });
        });
    });
};

[html]
<link rel=”stylesheet” type=”text/css”
href=”js/jquery.mobile-1.3.1.css”>   
    <script src=”js/jquery.js”></script>   
io实时投票系统,Mobile和PhoneGap混合开发。     
    <!– 那里插足项目中此外的引用 –>   
    <script type=”text/javascript” charset=”utf-8″
src=”js/cordova.js”></script> 
     
    <script src=”js/jquery.mobile-1.3.1.js”></script> 

rails g rails_kindeditor:install

rails kindeditor:assets
一.四三种办法的不同

1.二 和 一.1 的益处正是js代码直接在文书档案中不会发出http请求,
然而却无法缓存下来了,每三次呼吁都要加载3回, 壹.三 就刚刚和地点相反的,
壹.三会发生http请求, 不过能够被浏览器缓存下来,
一.二 方式不可能加载很多的js代码不然后边就非常的小概维护了, 而一.三 和一.1未有那一个题材

好了,服务端的拍卖到位了。
在public/js/services/services.js中加入

<link rel=”stylesheet” type=”text/css”
href=”js/jquery.mobile-1.3.1.css”> 
 <script src=”js/jquery.js”></script> 
 
 <!– 那里参预项目中任何的引用 –> 
 <script type=”text/javascript” charset=”utf-8″
src=”js/cordova.js”></script>
 
 <script src=”js/jquery.mobile-1.3.1.js”></script>
小心顺序。

  js获取编辑器的始末

一.5 js 代码参预的岗位

js 代码一般在四个职位参加的,
1.5.1 在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <script src="../a.js"></script>  
</head>
<body >

</body>
</html>


// a.js 
alert('hello world')

唯独这种艺术在js 中是不能够访问到dom属性的, 因为浏览器的在加载成功js
就登时执行了, 可是此时html还一直不加载出来, 所以无法访问到dom的,
化解的点子正是用body.onload事件加载要访问dom的js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../a.js"></script>  
</head>
<body >
  <div id="data">123456</div>
</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}

再有一个难题就是浏览器在加载js代码的时候是会卡住html
代码的加载的,要等js 加载完毕才会去加载html的,
所以要是js代码量十分大或用户的网络相当的慢就会产出浏览器的白屏了,
那样用户体验很糟糕, 所以一般不会放大批量的js代码在head标签中,
放也是放很微量的js代码

//webSocket定义
.factory('socket', function($rootScope){
    var socket = io.connect();
    return {
        on: function(eventName, callback){
            socket.on(eventName, function(){
                var args = arguments;
                $rootScope.$apply(function(){
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback){
            socket.emit(eventName, data, function(){
                var args = arguments;
                $rootScope.$apply(function(){
                    if(callback){
                        callback.apply(socket, args);
                    }
                });
            });
        }
    }
});

3、在</head>在此以前插手<meta charset=”UTF-八”> 以帮衬中文。

 rails页面中进入以下表单

一.5.2 在html事件中参预js代码

那种方法同样会设有上边壹.伍.一的标题, 而且在那种办法, 还会更难保险了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data" onclick="var div = document.getElementById('data'); var conent = document.getElementById('conent'); conent.innerHTML = div.innerHTML">123456</div>
  <div id= "content"></div> 
</body>
</html>
// 上面的只是很少的功能, 如果再多点就基本无法维护了

public/js/controllers/controllers.js中加入

 

  <%= form_for @article do |f| %>
    <%= f.kindeditor :content, :editor_id => 'my_editor' %>
  <% end %>
一.五.叁 在body 最终边用script标签 到场js代码

那种形式未有地点二种的难题,因为js代码是在css 和html的后面所以不会因为加载js代码而出现白屏了,可是在html的图纸相当大依然加载别的大的财富的时候,
会出现js还尚未加载成功,而html代码和css代码加载成功了,
做成的页面假死意况(轮播图不动, 按钮点击没效果的景观因为js还向来不加载回来, 浏览器在加载大的图形和财富)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>

</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}
//投票详情
.controller('PollItemCtrl', function($scope, $routeParams, socket, Poll){
    Poll.get($routeParams.pollId).then(function(data){
        $scope.poll = data;
    })
    //监听当前用户
    socket.on('myvote', function(data){
        console.dir(data);
        if(data._id === $routeParams.pollId){
            $scope.poll = data;
        }
    });
    //监听投票后的数据
    socket.on('vote', function(data){
        console.dir(data);
        if(data._id === $routeParams.pollId){
            $scope.poll.choices = data.choices;
            $scope.poll.totalVotes = data.totalVotes;
        }
    });
    //投票
    $scope.vote = function(){
        var pollId = $scope.poll._id,
            choiceId = $scope.poll.userVote;
        if(choiceId){
            var voteObj = {
                poll_id : pollId,
                choice: choiceId
            }
            socket.emit('send:vote', voteObj);
        }else{
            alert('请选择一个选项');
        }
    };
})

File,解压获得其JavaScript,
CSS和images。放到/assets/www/js目录下。如图:【在那之中jquery.js是从demos的js目录里复制…

    js

1.6 noscript 标签

因为浏览器有二个剥夺js脚本的选项, 所以就有了noscript标签,
这些标签是用来在禁止使用js脚本的浏览器提醒用户的,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>
  <noscript>不让js运行不给用, 哈哈哈哈</noscript>
</body>
</html>

那里是客户端的处理,以上正是全体代码了
工程地点已经上传到GitHub上了
能够透过以下地点查看或下载
代码查看

  my_editor.html();

  

  

 


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图