【亚洲必赢官网】Mobile和PhoneGap混合开发,io实时投票系统

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

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

其三节,接上头的二节,那里大家投入socket.io的拍卖
首先,大家在./bin/www文件里投入

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

gem 'rails_kindeditor', '~> 0.5.0'
一.一 在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
 

【亚洲必赢官网】Mobile和PhoneGap混合开发,io实时投票系统。   $ bundle  

1.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>   
     
    <!– 那里进入项目中任何的引用 –>   
    <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.4两种艺术的分别

一.二 和 一.一 的功利正是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获取编辑器的始末

1.五 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代码量十分的大或用户的网络相当的慢就会师世浏览器的白屏了,
那样用户体验很不好, 所以1般不会放大批量的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);
                    }
                });
            });
        }
    }
});

三、在</head>此前参加<meta charset=”UTF-八”> 以支撑汉语。

 rails页面中到场以下表单

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

那种办法同样会设有下面1.伍.1的难点, 而且在那种措施, 还会更难保险了

<!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 %>
1.5.三 在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地图