查看別人的行爲

我很新的HTML5和JavaScript，下面的一些教程，
我已經想出了這樣的事情：查看別人的行爲

<html> 
<head> 
<title> Track Mouse </title> 
<canvas id="myCanvas" width="400" height="200" 
style="border:1px solid #000000;"> 
</canvas> 
<script type="text/javascript"> 
function main() 
{ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 

    window.onmousemove = handleMouseMove; 
    function handleMouseMove(event) { 

     event = event || window.event; // IE-ism 
     // event.clientX and event.clientY contain the mouse position 
     xPos = event.clientX; 
     yPos = event.clientY; 

     // Within entire canvas 
     if (xPos >= 0 && xPos <= myCanvas.width && 
      yPos >= 0 && yPos <= myCanvas.height) { 

      document.Form1.posx.value = xPos; 
      document.Form1.posy.value = yPos; 
      // Top-left 
      if (xPos <= myCanvas.width/2 && xPos >= 0 && 
       yPos <= myCanvas.height/2 && yPos >= 0) { 
       ctx.beginPath(); 
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 
       ctx.moveTo(0, 0); 
       ctx.lineTo(xPos, yPos); 
       ctx.stroke(); 
      } 
      // Top-right 
      if (xPos <= myCanvas.width && xPos >= myCanvas.width/2 && 
       yPos <= myCanvas.height/2 && yPos >= 0) { 
       ctx.beginPath(); 
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 
       ctx.moveTo(myCanvas.width, 0); 
       ctx.lineTo(xPos, yPos); 
       ctx.stroke(); 
      } 
      // Bottom-left 
      if (xPos <= myCanvas.width && xPos >= 0 && 
       yPos <= myCanvas.height && yPos >= myCanvas.height/2) { 
       ctx.beginPath(); 
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 
       ctx.moveTo(0, myCanvas.height); 
       ctx.lineTo(xPos, yPos); 
       ctx.stroke(); 
      } 
      // Bottom-right 
      if (xPos <= myCanvas.width && xPos >= myCanvas.width/2 && 
       yPos <= myCanvas.height && yPos >= myCanvas.height/2) { 
       ctx.beginPath(); 
       ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); 
       ctx.moveTo(myCanvas.width, myCanvas.height); 
       ctx.lineTo(xPos, yPos); 
       ctx.stroke(); 
      } 
     } 
    } 
} 
</script> 

</head> 

<body onload="main()"> 
<form name="Form1"> 
POSX: <input type="text" name="posx"><br> 
POSY: <input type="text" name="posy"><br> 
</form> 
</body> 
</html>

這裏是上面的代碼演示試運行：http://jsfiddle.net/9YXBD/

我想借此更進了一步，我希望它在同一時間顯示別人的動作。因此，例如，如果我有兩個Chrome瀏覽器打開並排，並在右窗口的畫布中進行移動，則我的移動也會顯示在左側窗口的畫布中。我查看了HTML5的server-side events，但我不知道從哪裏開始。

來源

2014-04-16 user3397452

什麼你有一臺服務器了嗎？ –

我在HostMonster上有一臺主機服務器 – user3397452

我應該澄清。你有一個你想用這個功能增強的服務器端Web應用程序嗎？ –

你不能沒有一臺服務器連接到，這將是運行提供某種連接集線器的所有客戶端連接到服務器端的應用程序或服務做到這一點。這需要一些服務器端編程。沒有外界的幫助，瀏覽器無法連接到其他瀏覽器。

您將有服務器從客戶接受輸入，然後發生了什麼更新發送給所有其他連接的客戶端。具體如何做到這一點將取決於您使用的服務器端技術。

您應該使用哪種服務器端技術？這裏的選擇幾乎是無限的，我不可能在這裏推薦任何權威。選擇一種你喜歡的語言，最有可能的方法是用它編寫服務器端代碼。

在客戶端，你可以使用服務器端的事件偵聽來自服務器的更新。但是，您的服務器也必須實施以支持該協議。

，但我只是不知道從哪裏開始。

你啓動服務器
上公開一些API該服務器上的發送和從客戶得到的信息。
連接到這些API的從客戶端（客戶端的JavaScript）

來源

2014-04-16 21:52:52

上面提到的其他人使用上面的Node.js，這是什麼將用於服務器端應用程序？ – user3397452

當然。但就像我說的那樣，有很多選擇可供選擇。而且你可以用這些工具完成這樣的任務。但是，是的，node.js將允許您創建一個可以實現此目標的服務器應用程序。 –

好的，我會檢查出來的。謝謝大家（亞歷克斯韋恩，Nephelococcygia，ProllyGeek），我真的很感激它！ – user3397452

我會看看到像signalR技術和生產Web服務器應用程序。有一個很好的演示不是太不相似的，你在這裏做http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-high-frequency-realtime-with-signalr-20

來源

2014-04-16 22:06:28 Ian

查看別人的行爲

回答

相關問題