This document provides an overview of Jerromy Lee and his work developing interactive media applications and games using technologies like WebSockets, Bluetooth, and peer-to-peer networking. It summarizes Jerromy's background and experience, describes several projects he has worked on including games for McDonald's and Sony, and provides information on the tools and techniques used to develop these types of connected experiences, including JavaScript, EaselJS, Node.js, and Socket.io.

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