<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=1024, user-scalable=no">

<title>CodingWithMe WebSocket</title>

<!-- Required stylesheet -->

<link rel="stylesheet" media="screen" href="css/deck.core.css">

<!-- Extension CSS files go here. Remove or add as needed. -->

<link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">

<link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">

<link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">

<link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">

<link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">

<!-- Style theme. More available in /themes/style/ or create your own. -->

<link rel="stylesheet" media="screen" href="css/swiss.css">

<!-- Transition theme. More available in /themes/transition/ or create your own. -->

<link rel="stylesheet" media="screen" href="css/fade.css">

<!-- Basic black and white print styles -->

<link rel="stylesheet" media="print" href="css/print.css">

<!-- Required Modernizr file -->

<script src="js/modernizr.custom.js"></script>

<style>

#authorName{

bottom: 80px;

position: absolute;

}

#3pplist > ul{

list-style-type: none;

}

#3pplist img{

width: 508px;

}

</style>

<div class="deck-container">

<!-- Begin slides. Just make elements with a class of slide. -->

<section class="slide">

<h1>When Node meet with WebSocket</h1>

<h2>CodingWithMe</h2>

<h5 id="authorName">XLD/D Wei Luo</h5>

</section>

<section class="slide">

<h2>Introduction</h2>

<img src="img/brief.png"/>

</section>

<section class="slide">

<h2>What happened to HTML</h2>

<ol>

<li><h3>Protocol for Document transmit<h3></li>

<li><h3>RFC 2616 (June 1999), which defines HTTP/1.1</h3></li>

</ol>

</section>

<section class="slide">

<h2>What happened to HTML</h2>

<img src="img/compare.png"/>

</section>

<section class="slide">

<h2>Technology Push</h2>

<ol>

<li>

<h3>HTML5</h3>

</li>

<li>

<h3>Cloud and Mobility</h3>

<p>Web App And Mobile Browser Support</p>

</li>

</ol>

</section>

<section class="slide">

<h2>Customers Pull</h2>

<ol>

<li><h3>Real-Time Web App(e.g. Chatting)</h3></li>

<li><h3>Front-End Notification(e.g. BMC Alarm)</h3></li>

</ol>

</section>

<section class="slide" >

<h2>Let's Coding</h2>

<ul style="list-style-type: none;">

<li><img style="width: 508px;" src='img/codio.PNG'/></li>

<li><img style="width: 508px;" src='img/node.PNG'/></li>

<li><img style="width: 508px;" src='img/express.PNG'/></li>

<li><img style="width: 508px;" src='img/socket.io.PNG'/></li>

</ul>

</section>

<section class="slide">

<h2>Let's Coding</h2>

<p>First let’s create a <code>package.json</code> manifest file that describes our project.</p>

<pre>

<code>

{

"name": "socket-chat-example",

"version": "0.0.1",

"description": "my first socket.io app",

"dependencies": {}

}

</code>

</pre>

</section>

<section class="slide">

<h2>Install Experss framwork</h2>

<p>Using npm to install <strong>express</strong></p>

<pre>

<code>

npm install --save express

</code>

</pre>

</section>

<section class="slide">

<h2>Saying <strong>Hello World</strong> to Node.js</h2>

<p> create an <code>index.js</code> file</p>

<pre>

<code>

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res){

res.send('&lt;h1&gt Hello world&lt;/h1&gt');

});

http.listen(3000, function(){

console.log('listening on *:3000');

});

</code>

</pre>

<ol>

<li>Express initializes app to be a function handler that you can supply to an HTTP server (as seen in line

</li>

<li>We define a route handler / that gets called when we hit our website home.</li>

<li>We make the http server listen on port 3000.</li>

</ol>

</section>

<section class="slide">

<h2>Fire! Helllllo Worrrrld!</h2>

<p>If you run <code>node index.js</code> you should see the following:</p>

<img src="img/1.png" alt="node_index_js_run">

<p>And if you point your browser to <code>http://localhost:3000</code>:</p>

<img src="img/2.png" alt="hello_world_browser"/>

</section>

<section class="slide">

<h2>Serving HTML</h2>

<p>So far in <code>index.js</code> we’re calling <code>res.send</code> and pass it a HTML string. Our code would look very confusing if we just placed our entire application’s HTML there. Instead, we’re going to create a <code>index.html</code> file and serve it.</p>

<p>Let’s refactor our route handler to use <code>sendfile</code> instead:</p>

<pre>

<code>

app.get('/', function(req, res){

res.sendfile('index.html');

});

</code>

</pre>

</section>

<section class="slide">

<h2>Populate index.html</h2>

<pre>

<code>

&lt;!doctype html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Socket.IO chat&lt;/title&gt;

&lt;style&gt;

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font: 13px Helvetica, Arial; }

form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

#messages { list-style-type: none; margin: 0; padding: 0; }

#messages li { padding: 5px 10px; }

#messages li:nth-child(odd) { background: #eee; }

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;ul id="messages"&gt;&lt;/ul&gt;

&lt;form action=""&gt;

&lt;input id="m" autocomplete="off" /&gt;&lt;button&gt;Send&lt;/button&gt;

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;

</code>

</pre>

</section>

<section class="slide">

<h2>Chatting room UI</h2>

<p>Run <code>node index.js</code> again</p>

<img src="img/3.png"/>

</section>

<section class="slide">

<h2>Integrating Socket.IO</h2>

<p><strong>Socket.IO</strong> is composed of two parts:</p>

<ol>

<li>A server that integrates with (or mounts on) the Node.JS HTTP Server: <code>socket.io</code></li>

<li>A client library that loads on the browser side: <code>socket.io-client</code></li>

</ol>

<pre>

<code>

npm install --save socket.io

</code>

</pre>

<p>the previous command will install the module and add the dependency to package.json(please check your package.json file)</p>

</section>

<section class="slide">

<h2>Integrating Socket.IO</h2>

<pre>

<code>

var app = require('express')();

var http = require('http').Server(app);

<strong>var io = require('socket.io')(http);</strong>

app.get('/', function(req, res){

res.sendfile('index.html');

});

<strong>

io.on('connection', function(socket){

console.log('a user connected');

});

</strong>

http.listen(3000, function(){

console.log('listening on *:3000');

});

</code>

</pre>

<p>Notice that I initialize a new instance of <code>socket.io</code> by passing the http (the HTTP server) object. Then I listen on the <code>connection</code> event for incoming sockets, and we log it to the console.</p>

</section>

<section class="slide">

<h2>Integrating Socket.IO</h2>

<pre>

<code>

&lt;body&gt;

....

....

<strong>

&lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;

&lt;script&gt;

var socket = io();

&lt;/script&gt;

</strong>

&lt;/body&gt;

</code>

</pre>

<p>

That’s all it takes to load the <code>socket.io-client</code>, which exposes a <code>io</code> global, and then connect.

</p>

<p>

Notice that I’m not specifying any URL when I call <code>io()</code>, since it defaults to trying to connect to the host that serves the page.

</p>

</section>

<section class="slide">

<h2>Fire! Socket.IO</h2>

<p>

If you now reload the server and the website you should see the console print “a user connected”.Try opening several tabs, and you’ll see several messages:

</p>

<img src="img/4.png"/>

</section>

<section class="slide">

<h2>adds a special disconnect event</h2>

<pre>

<code>

io.on('connection', function(socket){

console.log('a user connected');

<strong>

socket.on('disconnect', function(){

console.log('user disconnected');

});

</strong>

});

</code>

</pre>

</section>

<section class="slide">

<h2>Refresh Tab see what happend</h2>

<p>

Then if you refresh a tab several times you can see it in action

</p>

<img src="img/5.png"/>

</section>

<section class="slide">

<h2>Emitting events</h2>

<p>

The main idea behind Socket.IO is that you can send and receive any events you want, with any data you want. Any objects that can be encoded as <strong>JSON</strong> will do, and <strong>binary</strong> data is supported too.

</p>

</section>

<section class="slide">

<h2>Coding with Events</h2>

<p>

Let’s make it so that when the user types in a message, the server gets it as a chat message event. The scripts section in index.html should now look as follows:

</p>

<pre>

<code>

&lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;

<strong><em>

&lt;script src="http://code.jquery.com/jquery-1.11.1.js"&gt;&lt;/script&gt;

</em></strong>

&lt;script&gt;

var socket = io();

<strong><em>

$('form').submit(function(){

socket.emit('chat message', $('#m').val());

$('#m').val('');

return false;

});

</em></strong>

&lt;/script&gt;

</code>

</pre>

</section>

<section class="slide">

<h2>Server Side support code</h2>

<p>

And in <code>index.js</code> we print out the chat message event:

</p>

<pre>

<code>

io.on('connection', function(socket){

console.log('a user connected');

socket.on('disconnect', function(){

console.log('user disconnected');

});

<strong>

socket.on('chat message', function(msg){

console.log('message: ' + msg);

});

</strong>

});

</code>

</pre>

</section>

<section class="slide">

<h2>Demo Time</h2>

<p>The result should be like the following video:</p>

<iframe src="img/1.mp4" width="1900" height="525" frameborder="0"></iframe>

</section>

<section class="slide">

<h2>send Hello from Server to Client</h2>

<pre>

<code>

&lt;script&gt;

var socket = io();

$('form').submit(function(){

socket.emit('chat message', $('#m').val());

$('#m').val('');

return false;

});

<strong>

socket.on('chat message', function(msg){

$('#messages').append($('&lt;li&gt;').text(msg));

});

</strong>

&lt;/script&gt;

</code>

</pre>

</section>

<section class="slide">

<h2>send Hello from Server to Client</h2>

<pre>

<code>

var app=require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);

<strong>

var repl = require("repl");

</strong>

...

http.listen(3000, function(){

console.log('listening on *:3000');

});

<strong>

var remoteMultiEval = function(cmd, context, filename, callback) {

io.emit('chat message',cmd);

callback(null, "(result pending)");

}

repl.start({"eval": remoteMultiEval});

</strong>

</code>

</pre>

</section>

<section class="slide">

<h2>Broadcasting!</h2>

<p>The next goal is for us to emit the event from the server to the rest of the users.</p>

</section>

<section class="slide">

<h2></h2>

<p>In order to send an event to everyone, Socket.IO gives us the <code>io.emit</code></p>

<pre>

<code>

io.emit('some event', { for: 'everyone' });

</code>

</pre>

</section>

<section class="slide">

<h2></h2>

<p>If you want to send a message to everyone except for a certain socket, we have the <code>broadcast</code> flag:</p>

<pre>

<code>

io.on('connection', function(socket){

socket.broadcast.emit('chat message','new comer join');

});

</code>

</pre>

</section>

<section class="slide">

<h2></h2>

<p>In this case, for the sake of simplicity we’ll send the message to everyone, including the sender.</p>

<pre>

<code>

io.on('connection', function(socket){

<strong>

socket.on('chat message', function(msg){

io.emit('chat message', msg);

});

</strong>

});

</code>

</pre>

</section>

<section class="slide">

<h2>Demo Time</h2>

<p>And that completes our chat application, in about 20 lines of code! This is what it looks like:</p>

<iframe src="img/2.mp4" width="1900" height="525" frameborder="0"></iframe>

</section>

<section class="slide">

<h2>Demo Time</h2>

<p>what happened when you restart your node server? </p>

<ul>

<li><strong>Ctrl+C</strong> to stop</li>

<li><strong>node index.js</strong> to restart</li>

</ul>

</section>

<section class="slide">

<h2>User Cases</h2>

<ol>

<li>

<h3>Gaming</h3>

<p>With the success of Zynga and other social gaming companies, online gaming

has become a hot trend.WebSocket make building an in-browser become possible</p>

</li>

<li>

<h3>Social Stream Updates</h3>

<p>Twitter is the best example of getting real-time data (the tweets) to the browser

without user action. Google+ and Facebook have it too. The important thing on

social networks is, being updated about happenings in real time.</p>

</li>

<li>

<h3>Business applications</h3>

<p>Salesforce, one of the most popular hosted CRM solutions, introduced Chatter.It allows the

customers to add comments or post updates on issues, which appear in real time to

the support associates on their system.</p>

</li>

<li>

<h3>Web-based monitors</h3>

<p>The latest updates to Google Analytics include a functionality to see the real-time

updates of users visiting your website.</p>

</li>

</ol>

</section>

<section class="slide">

<h2>What WebSocket Bring to Us</h2>

<ol>

<li><h3>Use Http to upgrade protocol</h3></li>

<li><h3>Full-duplex Bidirectional</h3></li>

<li><h3>Sub-protocol above WebSocket</h3></li>

<li><h3>wss:// (over SSL)</h3></li>

</ol>

</section>

<section class="slide">

<h2>Q&A</h2>

</section>

<!-- End slides. -->

<!-- Begin extension snippets. Add or remove as needed. -->

<!-- deck.navigation snippet -->

<div aria-role="navigation">

<a href="#" class="deck-prev-link" title="Previous">&#8592;</a>

<a href="#" class="deck-next-link" title="Next">&#8594;</a>

</div>

<!-- deck.status snippet -->

<p class="deck-status" aria-role="status">

<span class="deck-status-current"></span>

/

<span class="deck-status-total"></span>

</p>

<!-- deck.goto snippet -->

<form action="." method="get" class="goto-form">

<label for="goto-slide">Go to slide:</label>

<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">

<datalist id="goto-datalist"></datalist>

<input type="submit" value="Go">

</form>

<!-- End extension snippets. -->

</div>

<script src="js/jquery.min.js"></script>

<script src="js/deck.core.js"></script>

<script src="extensions/menu/deck.menu.js"></script>

<script src="extensions/goto/deck.goto.js"></script>

<script src="extensions/status/deck.status.js"></script>

<script src="extensions/navigation/deck.navigation.js"></script>

<script src="extensions/scale/deck.scale.js"></script>

$(function() {

$.deck('.slide');

});