WEB SOCKET 應用

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

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

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

MacDonald

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

Sony Make TV

• https://www.youtube.com/watch?v=dEAgynm3Ng8

Mr. CHIA

• http://www.ilovechia.biz/event/1301/

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

玩劇

• 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

the nearest I

• https://vimeo.com/95245928

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

• Node.js

• http://nodejs.tw/

• http://nodejs.org/

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

• [email protected]