Socket.io和jQuery - 結合

connectionCounter.js

var express = require("express"); 
var app = express(); 
var socket = require("socket.io"); 
var server = app.listen(4000); 
var io = socket.listen(server); 

app.get('/', function(request, response){ 
response.sendfile(__dirname + "/index.html"); 
}); 

var activeClients = 0; 

io.sockets.on('connection', function(socket){clientConnect(socket)}); 

function clientConnect(socket){ 
activeClients +=1; 
io.sockets.emit('message', {clients:activeClients}); 
socket.on('disconnect', function(){clientDisconnect()}); 
} 

function clientDisconnect(){ 
    activeClients -=1; 
    io.sockets.emit('message', {clients:activeClients}); 
}

的index.html（計數連接的客戶端網站）

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Connection Counter</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
     function msgReceived(msg){ 
     $clientCounter.html(msg.clients); 
     } 

     $(document).ready(function() { 
     $clientCounter = $("#client_count") 

     var socket = io.connect('http://localhost:4000'); 
     socket.on('message', function(msg){msgReceived(msg)}); 
     }); 
    </script> 
    </head> 
    <body> 
    <p><span id="client_count">0</span> connected clients</p> 
</body> 
</html>

和索引。 html（jQuery Knob）

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQuery Knob demo</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
     <script src="js/jquery.knob.js"></script> 
     <script> 
      $(function($) { 

       $(".knob").knob({ 
        change : function (value) { 
         //console.log("change : " + value); 
        }, 
        release : function (value) { 
         //console.log(this.$.attr('value')); 
         console.log("release : " + value); 
        }, 
        cancel : function() { 
         console.log("cancel : ", this); 
        }, 
        draw : function() { 

         // "tron" case 
         if(this.$.data('skin') == 'tron') { 

          var a = this.angle(this.cv) // Angle 
           , sa = this.startAngle   // Previous start angle 
           , sat = this.startAngle   // Start angle 
           , ea       // Previous end angle 
           , eat = sat + a     // End angle 
           , r = 1; 

          this.g.lineWidth = this.lineWidth; 

          this.o.cursor 
           && (sat = eat - 0.3) 
           && (eat = eat + 0.3); 

          if (this.o.displayPrevious) { 
           ea = this.startAngle + this.angle(this.v); 
           this.o.cursor 
            && (sa = ea - 0.3) 
            && (ea = ea + 0.3); 
           this.g.beginPath(); 
           this.g.strokeStyle = this.pColor; 
           this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false); 
           this.g.stroke(); 
          } 

          this.g.beginPath(); 
          this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; 
          this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false); 
          this.g.stroke(); 

          this.g.lineWidth = 2; 
          this.g.beginPath(); 
          this.g.strokeStyle = this.o.fgColor; 
          this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2/3, 0, 2 * Math.PI, false); 
          this.g.stroke(); 

          return false; 
         } 
        } 
       }); 

       // Example of infinite knob, iPod click wheel 
       var v, up=0,down=0,i=0 
        ,$idir = $("div.idir") 
        ,$ival = $("div.ival") 
        ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); } 
        ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); }; 
       $("input.infinite").knob(
            { 
            min : 0 
            , max : 20 
            , stopper : false 
            , change : function() { 
                if(v > this.cv){ 
                 if(up){ 
                  decr(); 
                  up=0; 
                 }else{up=1;down=0;} 
                } else { 
                 if(v < this.cv){ 
                  if(down){ 
                   incr(); 
                   down=0; 
                  }else{down=1;up=0;} 
                 } 
                } 
                v = this.cv; 
               } 
            }); 
      }); 
     </script> 
     <style> 
      body{ 
       padding: 0; 
       margin: 0px 50px; 
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
       font-weight: 300; 
       text-rendering: optimizelegibility; 
      } 
      p{font-size: 30px; line-height: 30px} 
      div.demo{text-align: center; width: 280px; float: left} 
      div.demo > p{font-size: 20px} 
     </style> 
    </head> 
    <body> 
     <div style="clear:both"></div> 
     <div id="big" class="demo" style="height:800px;width:100%"> 
      <p>&#215; Big !</p> 
      <pre> 
data-width="700" 
      </pre> 
      <input class="knob" data-min="0" data-max="100" data-width="700" data-height="700" data-thickness=".7" data-cursor=true> 
     </div> 
    </body> 
</html>

我試圖結合這兩個index.html，但沒有運氣。單獨的工作，但是當我結合並嘗試運行nodejs時，計數器不起作用，旋鈕不顯示。

有什麼建議嗎？

HOWTO：http://www.scottblaine.com/getting-started-node-js-socket-io/

jQuery的旋鈕：https://github.com/aterrien/jQuery-Knob

組合：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQuery Knob demo</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script src="js/jquery.knob.js"></script> 
     <script src="/socket.io/socket.io.js"></script> 
     <script> 
      function msgReceived(msg){ 
       $clientCounter.html(msg.clients); 
      } 

      $(document).ready(function() { 
       $clientCounter = $("#client_count") 

       var socket = io.connect('http://localhost:4000'); 
       socket.on('message', function(msg){msgReceived(msg)}); 
      }); 

      $(function($) { 

       $(".knob").knob({ 
        change : function (value) { 
         //console.log("change : " + value); 
        }, 
        release : function (value) { 
         //console.log(this.$.attr('value')); 
         console.log("release : " + value); 
        }, 
        cancel : function() { 
         console.log("cancel : ", this); 
        }, 
        draw : function() { 

         // "tron" case 
         if(this.$.data('skin') == 'tron') { 

          var a = this.angle(this.cv) // Angle 
           , sa = this.startAngle   // Previous start angle 
           , sat = this.startAngle   // Start angle 
           , ea       // Previous end angle 
           , eat = sat + a     // End angle 
           , r = 1; 

          this.g.lineWidth = this.lineWidth; 

          this.o.cursor 
           && (sat = eat - 0.3) 
           && (eat = eat + 0.3); 

          if (this.o.displayPrevious) { 
           ea = this.startAngle + this.angle(this.v); 
           this.o.cursor 
            && (sa = ea - 0.3) 
            && (ea = ea + 0.3); 
           this.g.beginPath(); 
           this.g.strokeStyle = this.pColor; 
           this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false); 
           this.g.stroke(); 
          } 

          this.g.beginPath(); 
          this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ; 
          this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false); 
          this.g.stroke(); 

          this.g.lineWidth = 2; 
          this.g.beginPath(); 
          this.g.strokeStyle = this.o.fgColor; 
          this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2/3, 0, 2 * Math.PI, false); 
          this.g.stroke(); 

          return false; 
         } 
        } 
       }); 

       // Example of infinite knob, iPod click wheel 
       var v, up=0,down=0,i=0 
        ,$idir = $("div.idir") 
        ,$ival = $("div.ival") 
        ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); } 
        ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); }; 
       $("input.infinite").knob(
            { 
            min : 0 
            , max : 20 
            , stopper : false 
            , change : function() { 
                if(v > this.cv){ 
                 if(up){ 
                  decr(); 
                  up=0; 
                 }else{up=1;down=0;} 
                } else { 
                 if(v < this.cv){ 
                  if(down){ 
                   incr(); 
                   down=0; 
                  }else{down=1;up=0;} 
                 } 
                } 
                v = this.cv; 
               } 
            }); 
      }); 
     </script> 
     <style> 
      body{ 
       padding: 0; 
       margin: 0px 50px; 
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
       font-weight: 300; 
       text-rendering: optimizelegibility; 
      } 
      p{font-size: 30px; line-height: 30px} 
      div.demo{text-align: center; width: 280px; float: left} 
      div.demo > p{font-size: 20px} 
     </style> 
    </head> 
    <body> 
     <p><span id="client_count">0</span> connected clients</p> 
     <div style="clear:both"></div> 
     <div id="big" class="demo" style="height:800px;width:100%"> 
      <p>&#215; Big !</p> 
      <pre> 
data-width="700" 
      </pre> 
      <input class="knob" data-min="0" data-max="100" data-width="700" data-height="700" data-thickness=".7" data-cursor=true> 
     </div> 
    </body> 
</html>

來源

2013-10-04 James Bund

不同版本的jQuery的可能有手在它 – tymeJV

@tymeJV嘗試改變，沒有效果..順便說一句新的JavaScript（和編程一般... （ –

你可以發表你如何結合他們，有些東西可能會跳出:) – tymeJV

從我在你的代碼中看到。

io.sockets.on('connection', function(socket){clientConnect(socket)});

插座是特定於客戶端它連接。所以這些消息只發送給那個特定的客戶端。如果您想要將消息廣播給所有客戶端。您需要專門將消息發送到所有插座

http://michaelheap.com/sending-messages-to-certain-clients-with-socket-io/

來源

2013-10-04 01:57:04 Gireesh

我不認爲這是問題，因爲代碼單獨運行良好，我使用io.sockets 。發射 –

Socket.io和jQuery - 結合

回答

相關問題