Download as PDF, PPTX
Uploaded byJerromy Lee
WEB SOCKET 應用
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.
WEB SOCKET 應用
- 1.
- 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.
- 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.
- 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.
- 14. Mobi Waver •https://www.youtube.com/watch?v=bxY7x-XNR_w
- 15.
- 16. the nearest I • https://vimeo.com/95245928
- 18. WebSocket • Partof the HTML5 • JavaScript interface • Uses the WebSocket protocol instead of HTTP • ws:// • wss:// • full-duplex • Why? Choose WebSocket? • Mobile
- 19. WebSocket • BrowserSupport (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-SideChoosing • 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 • WebVS 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 varcircle = 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.
- 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