Embed Size (px)
Citation preview
WebSocketJERROMY
2014.06
About Me• Jerromy Lee
• National Taiwan University of ART
• New Media Artist / Game Designer
• iOS / Android / OF / Flash Developer
• VRMZ ⼤大中華盃 VR盟主 ⾦金獎
• 404 電⼦子藝術節
• 上海電⼦子藝術節
• 台北數位藝術節
• 屏東影⾳音藝術節
• 法國 安亙湖 互動表演
• KT獎 遊戲設計 銀獎
• 4C數位創作競賽 遊戲組 銀獎
About Me• Job Experience. 7 years
• YAHOO 使⽤用者經驗設計師
• 華夏技術學院兼任講師
• 邊境數位科技 互動創意指導
• 邊境數位科技 技術部主管
• 科碼新媒體 新媒體藝術家
App Works
• Experience.
• iOS and Android Developer
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
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/
Super Sync Sports
• http://chrome.com/supersyncsports/#/en-US
Sony Make TV
• https://www.youtube.com/watch?v=dEAgynm3Ng8
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
Mobi Waver
• https://www.youtube.com/watch?v=bxY7x-XNR_w
WebSocket• Part of the HTML5
• JavaScript interface
• Uses the WebSocket protocol instead of HTTP
• ws://
• wss://
• full-duplex
• Why? Choose WebSocket?
• Mobile
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
WebSocket
• Architecture
• http://www.websocket.org/aboutwebsocket.html
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
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
WebSocket
• Web VS App
• Web — easy connect, needn’t install
• App — need install
• http://www.mesona.com.tw/app/
JavaScript Basic
• JavaScript Basic
• Tools: Google Chrome / Sublime
JavaScript Basic
• console.log(“Hello World”);
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
JavaScript Basic• Google Chrome Debug Tools.
JavaScript Basic
• EaselJS, deal the visual
• Like Flash Action Script 3
• The intro of HTML 5 Canvas
• http://www.createjs.com/#!/EaselJS
JavaScript Basic
• EaselJS, deal the visual
• Canvas — like flash stage
• var stage = new createjs.Stage("demoCanvas");
• http://www.w3schools.com/html/html5_canvas.asp
JavaScript Basic
• EaselJS
• http://www.createjs.com/tutorials/Getting%20Started/
• <canvas id=“demoCanvas” width=“500” height=“500”></canvas>
JavaScript Basicvar 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();
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
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……
Example File
• File
• https://dl.dropboxusercontent.com/u/32940203/who_template_clean.zip
Server Side
Server Side
• Node.js
• Why node.js?
• Socket I.O.
Server Side
• Node.js
• heroic
• socketIO
• wesocket npm
• Choose a solution what you want
Server Side
• Node.js
• Step 0. Install the NodeJS
• http://nodejs.org
• Step 1. Node.js
• console.log(“Hello World”);
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
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
Complete the works
• Goal:
• ⼤大家⼀一起合⼒力擊破⿎鼓，不斷的按按鈕，集氣的概念，⼤大家⼀一起合⼒力不斷的按按鈕到⼀一定程度就可成功擊破．
Complete the works
• End.
• https://www.facebook.com/jerromy
