WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎

3,374 views
3,223 views

Published on

WebSocketとCanvasをつかったオンライン対戦のオセロを作る企画
第1回 基礎の基礎

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,374
On SlideShare
0
From Embeds
0
Number of Embeds
612
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎

    1. 1. WebSocket Canvas - -
    2. 2. WebSocketCanvas
    3. 3. WebSocketCanvas
    4. 4. WebSocket Push
    5. 5. XHR Pull
    6. 6. WebSocket Push
    7. 7. WebSocket HelloWorld<!doctype html> var ws = require("websocket-server")<title>hello websocket</title> var server = ws.createServer();<input id="name" type="textfield" onchange="send(this);" /> server.addListener("connection", function(conn){<div id="msg"></div> conn.addListener("message", function(name){<script type="text/javascript"> server.broadcast("Hello " + name.toUpperCase());var conn; });(function() { }); if(window["WebSocket"]) { server.listen(8080); url = "ws://{ }:8080/"; conn = new WebSocket(url); conn.onmessage = function(e) { document.getElementById("msg").innerHTML = e.data; } }})();var send = function(m) { if(conn) { name = m.value; conn.send(name); }}</script>
    8. 8. WebSocket HTTPTCPURL scheme ws:/ wss:/ / / OK http://dev.ariel-networks.com/Members/inoue/websocket/
    9. 9. Canvasjavascript
    10. 10. Canvas HelloWorld <!doctype html> <title>Hello Canvas</title> <canvas id="canvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById("canvas"); (function(){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeRect(20, 20, 260, 160); ctx.beginPath(); ctx.fillStyle = rgb(188, 0, 45); ctx.arc(150, 100, 40, Math.PI*2, false); ctx.fill(); })(); </script>
    11. 11. Canvas3DVideo *1 *1: Video Canvas →http://www.craftymind.com/factory/html5video/CanvasVideo.html
    12. 12. WebSocketCanvas

    ×