We Would be curious About Chat Applications Response on time and blaming it if makes struggle a lot to connect with servers and message keeps on Failing with lot of Notification that "Message Failed".Many Of my Friends have faced that and Trolled the Application.And here comes the Technology known As Sockets/AJAX polling to instantly chat with our Besties/Crush :D .However we could use the Socket/Ajax Long polling Technology for Streaming Videos,Files and Tweets from Twitter for Web/Mobile and Desktop Apps too and for Real time Updates.it can be also used for Collaborative works over online to maintain concurrency among the group members and real time!
Ultimate Goal :
After Working/Reading this Post you can technically create and set up Node.js with Socket.io Server side and connect with Clients and Stream Media/Text Whatever may be!
Prerequisite :
1) Twitter Account with Verified by Mobile Number(This is mandatory to create apps on Dev.twitter)
3) Using Socket.io Basics - Read here from Xproweb [it's quite Easy.however beginners don't worry about it]
4) Node.js npm Commands /basics
Procedure :
Create a Twitter App :
Setting Up Server :
Node.js Server Setup with Socket.io and Writing functions for events that Emit.Generally Node.js Event Driven Programming Language which has infinite loops to execute in single threaded.So just we are going to write some Routines for Functions which mean that they must Execute when corresponding event occurs.
> npm install -g socket.io
> npm install -g express
package.json :
> npm install -g socket.io
> npm install -g express
package.json :
{
"name":"tweets",
"description":"Simple Streaming Twitter",
"version":"0.0.1",
"dependencies":
{
"express":"4.x.x",
"twit":"*",
"socket.io":"*"
}
}
"name":"tweets",
"description":"Simple Streaming Twitter",
"version":"0.0.1",
"dependencies":
{
"express":"4.x.x",
"twit":"*",
"socket.io":"*"
}
}
Install the package as per directed in package.json file.Additionally i have included twit which is also library acts for Twitter API.
server.js :
The above code contains the twit,Http and Express and then we written function to be triggered when connection to client is successfully established.here we are giving our required consumer key,Consumer Secret ,Access Token and Access Token Secret.with that we have added the streaming Watch list and then made API call to Twitter to get the Right Status and we are Emitting the Tweet as Data to our connected Clients via Sockets/Ajax Long Polling Approach.
Read here about How Does Socket.io Works / Does Socket.io uses Websockets ?
Client Setup :
The Basic Rule is simple Javascript event is triggered to connect to the server and Long Polling is done on Server to ensure they are connected and either Data gets Transmitted/Received using the Events by Javascript Socket.io.
A simple Client Example :
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
var socket = io.connect();
socket.on('stream', function(tweet){
server.js :
var express = require('express')
, app = express()
, http = require('http')
, server = http.createServer(app)
,Twit = require('twit')
, io = require('socket.io').listen(server);
server.listen(8080);
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
var target = ['cricket'];
var api = new Twit({
consumer_key: 'YYYYYYYYY'
, consumer_secret: 'YYYYYYYYY'
, access_token: 'YYYYYYYYYY'
, access_token_secret: 'YYYYYYYYYY'
})
io.sockets.on('connection', function (socket) {
var stream = api.stream('statuses/filter', { track: target })
stream.on('tweet', function (tweet) {
console.log(tweet);
io.sockets.emit('stream',tweet);
});
});
, app = express()
, http = require('http')
, server = http.createServer(app)
,Twit = require('twit')
, io = require('socket.io').listen(server);
server.listen(8080);
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
var target = ['cricket'];
var api = new Twit({
consumer_key: 'YYYYYYYYY'
, consumer_secret: 'YYYYYYYYY'
, access_token: 'YYYYYYYYYY'
, access_token_secret: 'YYYYYYYYYY'
})
io.sockets.on('connection', function (socket) {
var stream = api.stream('statuses/filter', { track: target })
stream.on('tweet', function (tweet) {
console.log(tweet);
io.sockets.emit('stream',tweet);
});
});
The above code contains the twit,Http and Express and then we written function to be triggered when connection to client is successfully established.here we are giving our required consumer key,Consumer Secret ,Access Token and Access Token Secret.with that we have added the streaming Watch list and then made API call to Twitter to get the Right Status and we are Emitting the Tweet as Data to our connected Clients via Sockets/Ajax Long Polling Approach.
Read here about How Does Socket.io Works / Does Socket.io uses Websockets ?
Client Setup :
The Basic Rule is simple Javascript event is triggered to connect to the server and Long Polling is done on Server to ensure they are connected and either Data gets Transmitted/Received using the Events by Javascript Socket.io.
A simple Client Example :
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>
var socket = io.connect();
socket.on('stream', function(tweet){
$("#data").append(tweet.text);
});
</script>
Resultant :
Final Word :
Thus We had Successfully created a simple Streaming from Twitter Real Time Updates with Node.js and Socket.io.If you're Downloading the Code replace the Keys and Work it out in Localhost and test the Streaming API from twitter.However this is the basic part of Socket.io.you could perform a lot when you go through the Documentation from Twitter!.
We will see how to Deploy Socket chat apps/Real time Data Sharing apps on Cloud in Next post.
We will see how to Deploy Socket chat apps/Real time Data Sharing apps on Cloud in Next post.
hope you have Enjoyed!For bugs/comments/hugs/report/issue/help just drop me a mail [email protected].or connect with me in Facebook/Twitter or Chat with me In G+.share is care.
0 comments:
Post a Comment
feel free to post your comments! Don't Spam here!