11. 2. VARIOUS TRANSPORTATION METHOD
ï§WebSocket
ï§Flash Socket
ï§HTMLFILE
ï§XHR Polling
ï§JSONP Polling
Fallback method
CREATED BY VORAKAMOL C.
12. 3. PURELY WRITTEN IN JAVASCRIPT
ON CLIENT-SIDE WHICH RUN IN THE
BROWSER AND SERVER-SIDE
CREATED BY VORAKAMOL C.
13. 4. CROSS BROWSER AND PLATFORM
ï§Support a lot of browser on both PC and
Mobile
ï§3rd Party Open Source implemented for
Android, iOS, etcâŠ
CREATED BY VORAKAMOL C.
15. 1. SETTING UP ENVIRONMENT
ON SERVER-SIDE
Installing Socket.io, express module in target folder
npm install socket.io express
CREATED BY VORAKAMOL C.
16. SENDER
RECEIVER
emit("test", {v1: "abc", v2:"def"});
signaling data
socket.on("test", function(data){
console.log("Received data is " + data);
});
BASIC UNDERSTANDING
CREATED BY VORAKAMOL C.
17. 2. CODING ON SERVER-SIDE
var socket = require('socket.io');
var express = require('express');
var http = require('http');
var app = express();
var server = http.createServer(app);
var io = socket.listen( server );
io.sockets.on('connection', function(socket){
socket.on('user_login', function(data){
console.log(data.username + " enters the system!");
io.sockets.socket(socket.id).emit('login_success');
});
});
server.listen(8080);
app.js
When
received a
signal called
âuser_loginâ,
execute
statement
inside
CREATED BY VORAKAMOL C.
18. 3. CODING ON CLIENT-SIDE
<html>
<head>
<script src="scripts/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="scripts/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var socket = io.connect( 'http://10.170.23.18:8080' );
socket.on('connect', function(data){
socket.on('login_success', function(){
$('#login_area').html("Login Success!");
});
});
$('#login_btn').click(function(){
socket.emit('user_login', {username: $('#login_textbox').val()});
});
});
</script>
</head>
index.php
CREATED BY VORAKAMOL C.
19. 3. CODING ON CLIENT-SIDE
<body>
<div id="login_area">
Enter name: <input type="text" id="login_textbox" />
<button type="button" id="login_btn">Login!</button>
</div>
</body>
</html>
index.php
CREATED BY VORAKAMOL C.
20. 4. LETâS SEE THE OUTPUT
STARTING SERVER
CREATED BY VORAKAMOL C.
21. 4. LETâS SEE THE OUTPUT
OPENING WEBSITE
CONNECTION HAS
BEEN ESTABLISHED
TO SERVER
CREATED BY VORAKAMOL C.
22. 4. LETâS SEE THE OUTPUT
TYPING THE NAME
AND CLICK LOGIN
BUTTON
CLIENT WILL EMIT THE SIGNAL CALLED âuser_loginâ ALONG WITH ARGUMENT
CALLED âusernameâ TO THE SERVER
CREATED BY VORAKAMOL C.
23. 4. LETâS SEE THE OUTPUT
SERVER RECEIVED THE SIGNAL CALLED âuser_loginâ ALONG WITH
USERNAME. NEXT, THE SERVER WILL SHOW THE NAME OF THE USER
WHO LOG INTO THE SYSTEM AND EMIT THE SIGNAL CALLED
âlogin_successâ BACK TO THAT CLIENT IN ORDER TO TELL THE CLIENT
THAT LOGIN PROCESS IS SUCCESS
CREATED BY VORAKAMOL C.
24. 4. LETâS SEE THE OUTPUT
WHEN THE CLIENT RECEIVED THE SIGNAL CALLED âlogin_successâ,
THE MESSAGE âLogin Success!â WILL SHOW UP ON THE SCREEN
CREATED BY VORAKAMOL C.
25. REFERENCES
âą http://socket.io/
âą https://github.com/LearnBoost/Socket.IO/wiki/Configuring-
Socket.IO
âą http://java.dzone.com/articles/getting-started-socketio-and
âą http://www.sitepoint.com/chat-application-using-socket-io/
âą http://code.tutsplus.com/tutorials/real-time-chat-with-nodejs-
socketio-and-expressjs--net-31708
âą http://tamas.io/advanced-chat-using-node-js-and-socket-io-
episode-1/
âą http://en.wikipedia.org/wiki/Socket.IO
CREATED BY VORAKAMOL C.