1. WebSocket
JERROMY
2014.06

2. About Me
• Jerromy Lee
• National Taiwan University of ART
• New Media Artist / Game Designer
• iOS / Android / OF / Flash Developer
• VRMZ ⼤大中華盃 VR盟主 ⾦金獎
• 404 電⼦子藝術節
• 上海電⼦子藝術節
• 台北數位藝術節
• 屏東影⾳音藝術節
• 法國 安亙湖 互動表演
• KT獎 遊戲設計 銀獎
• 4C數位創作競賽 遊戲組 銀獎

3. About Me
• Job Experience. 7 years
• YAHOO 使⽤用者經驗設計師
• 華夏技術學院兼任講師
• 邊境數位科技 互動創意指導
• 邊境數位科技 技術部主管
• 科碼新媒體 新媒體藝術家

4. App Works
• Experience.
• iOS and
Android
Developer

5. http://www.corma.com.tw/

6. Connection tech.
• Bluetooth 1.0~4.0
• Server get / post (Web Service)
• Socket Server (Socket Server / WebSocket)
• Peer to Peer
• iOS - Multipeer Connectivity
• https://vimeo.com/95407383
• Without Internet Environment
• Android - Wifi direct
• Without Internet Environment

7. Works intro.
• Super Sync Sports
• http://chrome.com/supersyncsports/#/en-US
• MacDonald
• https://www.youtube.com/watch?v=8BVZ_rn7bIY
• Sony Make TV
• https://www.youtube.com/watch?v=dEAgynm3Ng8
• Mr. Chia (CORMA)
• http://www.ilovechia.biz/event/1301/

8. Super Sync Sports
• http://chrome.com/supersyncsports/#/en-US

9. MacDonald
• https://www.youtube.com/watch?v=8BVZ_rn7bIY

10. Sony Make TV
• https://www.youtube.com/watch?v=dEAgynm3Ng8

11. Mr. CHIA
• http://www.ilovechia.biz/event/1301/

12. Works intro.
• Play 玩劇
• https://www.youtube.com/watch?v=0m0rfCpN-V8
• Mobi Waver
• https://www.youtube.com/watch?v=bxY7x-XNR_w
• Flying
• https://www.youtube.com/watch?v=V_l9EI-5mLY
• Who (數⽀支數⽀支 進⾏行中)
• the nearest I
• https://vimeo.com/95245928

13. 玩劇
• https://www.youtube.com/watch?v=0m0rfCpN-V8

14. Mobi Waver
• https://www.youtube.com/watch?v=bxY7x-XNR_w

15. Flying
• https://www.youtube.com/watch?v=V_l9EI-5mLY

16. the nearest I
• https://vimeo.com/95245928

18. WebSocket
• Part of the HTML5
• JavaScript interface
• Uses the WebSocket protocol instead of HTTP
• ws://
• wss://
• full-duplex
• Why? Choose WebSocket?
• Mobile

19. WebSocket
• Browser Support (WebSocket Version 13)
• http://caniuse.com/websockets
• Google Chrome (Web & Mobile)
• iOS 6 Safari
• Mozilla Firefox 6
• Opera 10.7 & 11.0
• IE 10

20. WebSocket
• Architecture
• http://
www.websocket.org/
aboutwebsocket.html

21. WebSocket
• Server-Side Choosing
• PHP WebSocket
• Node.js
• C# .Net
• Client-Side
• iOS (Socket Rocket)
• https://github.com/square/SocketRocket
• Android (Java WebSocket)
• https://github.com/TooTallNate/Java-WebSocket
• HTML Client (Javascript WebSocket Api)
• http://www.websocket.org/echo.html

22. Tools intro.
• Parse — Cloud Backend Service
• https://www.parse.com
• Create JS — JavaScript Visual Coding Library tool
• http://createjs.com/#!/CreateJS
• MAMP — PHP WebService
• http://www.mamp.info/en/
• XAMPP — PHP WebService
• https://www.apachefriends.org/zh_tw/index.html
• Google Chrome — JavaScript Debug Tools
• http://www.google.com.tw/intl/zh-TW/chrome/browser/
• Sublime Text — HTML / JavaScript Text Editor
• http://www.sublimetext.com

23. WebSocket
• Web VS App
• Web — easy connect, needn’t install
• App — need install
• http://www.mesona.com.tw/app/

24. JavaScript Basic
• JavaScript Basic
• Tools: Google Chrome / Sublime

25. JavaScript Basic
• console.log(“Hello World”);

26. JavaScript Basic
• WebSocket JS
• var ws = new WebSocket(“ws://127.0.0.1:8080”);
• ws.onopen = function(){ //Connected to WebSocket server };
• ws.onclose = function(){ //Disconnected };
• ws.onmessage = function(msg){ //incoming message};
• ws.send(“hello, world!”);
• ws.close(); //close the WebSocket connection

27. JavaScript Basic
• Google Chrome Debug Tools.

28. JavaScript Basic
• EaselJS, deal the visual
• Like Flash Action Script 3
• The intro of HTML 5 Canvas
• http://www.createjs.com/#!/EaselJS

29. JavaScript Basic
• EaselJS, deal the visual
• Canvas — like flash stage
• var stage = new createjs.Stage("demoCanvas");
• http://www.w3schools.com/html/html5_canvas.asp

30. JavaScript Basic
• EaselJS
• http://www.createjs.com/tutorials/Getting%20Started/
• <canvas id=“demoCanvas” width=“500” height=“500”></canvas>

31. JavaScript Basic
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.addChild(new createjs.Shape()).setTransform(100,100).graphics.f(“red").dc(0,0,50);
stage.update();

32. Server Side
• XAMPP / MAMP
• https://www.apachefriends.org/zh_tw/index.html
• http://www.mamp.info/en/
• PHP WebSocket
• http://www.sanwebe.com/2013/05/chat-using-websocket-
php-socket
• https://github.com/Flynsarmy/PHPWebSocket-Chat

33. Server Side
• Quick Start
• install the XAMPP or MAMP
• Put the php class(class.PHPWebSocket.php) and
php file (serverMain.php) into the web root folder.
• Write the client side program
• testing……

34. Example File
• File
• https://dl.dropboxusercontent.com/u/
32940203/who_template_clean.zip

35. Server Side
• Node.js
• http://nodejs.tw/
• http://nodejs.org/

37. Server Side

38. Server Side
• Node.js
• Why node.js?
• Socket I.O.

39. Server Side
• Node.js
• heroic
• socketIO
• wesocket npm
• Choose a solution what you want

40. Server Side
• Node.js
• Step 0. Install the NodeJS
• http://nodejs.org
• Step 1. Node.js
• console.log(“Hello World”);

41. Server Side
• Node.js (Express)
• Step 2. create package JSON
• Step 3. mkdir hello-world
• Step 4. sudo npm install
• Step 5. sudo npm install -g express-generator
• Step 6. sudo npm install -g express -t ejs testApp
• Step 7. npm start
• Step 8 http://localhost:3000

42. Server Side
• Node.js
• npm install --save socket.io
• Example File:
• http://expressjs.com
• http://socket.io/get-started/chat/
• https://dl.dropboxusercontent.com/u/32940203/
simpleChat.zip

43. Complete the works
• Goal:
• ⼤大家⼀一起合⼒力擊破⿎鼓，不斷的按按鈕，集氣的
概念，⼤大家⼀一起合⼒力不斷的按按鈕到⼀一定程度
就可成功擊破．

44. Complete the works
• End.
• https://www.facebook.com/jerromy
• jerromy@corma.com.tw