SlideShare a Scribd company logo
1 of 2
Download to read offline
Socket.io with Angular js Setup
Step 1. install Socket.IO to your app
$ cd path/to/your/project
npm install socket.io
Step 2. install socketio-auth for making authenticated requests
npm install socketio-auth
Step 3. Add this in your app.server file
var socket = require('socket.io');
var server = http.createServer(app);
var io = socket.listen(server);
/**
* Start Server
*/
server.listen(8080, function () {
console.log('your app server listening on port 8080 ' );
});
Step 4. On the client
index.html
<script src="socket.io/socket.io.js"></script> // npm module
Step 5. Add socket service to your app folder (services/socket .js file).
// socket service
angular.module('YOUR_APP', []).service('socket', function ($rootScope) {
var socket = io.connect();
socket = io(ApiRoutesListing.serverAddress, {
query: {
api_key: 'your_api_key'',
auth_token: auth_token
}
});
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});
Step 6. Add this service to index.html file
<script type="text/javascript" src="services/socket.js"></script> //your socket service
Step 7. Now add socket service to the controller
angular.module('YOUR_APP', []).controller('YOUR_CONTROLLER', function ($scope, socket, .........)
{
socket.on('connect', function () {
setInterval(function () {
socket.emit('PING');
}, 2000)
});
socket.on(SOCKET_EVENT_NAME', function (data) {
console.log(data)
//you will get socket responce(data) here
//now bind this data value with your view by using $scope this will update view when
//socket event occurs.
});
.
.
.
}

More Related Content

What's hot

Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...
Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...
Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...Atlassian
 
Einführung in Angular 2
Einführung in Angular 2Einführung in Angular 2
Einführung in Angular 2Johannes Hoppe
 
Multiple Submit Button Test App
Multiple Submit Button Test AppMultiple Submit Button Test App
Multiple Submit Button Test AppPeeyush Ranjan
 
Gigigo Rails Workshop
Gigigo Rails WorkshopGigigo Rails Workshop
Gigigo Rails WorkshopAlex Rupérez
 
Ajax pagination using j query in rails3
Ajax pagination using j query in rails3Ajax pagination using j query in rails3
Ajax pagination using j query in rails3Andolasoft Inc
 
The productive developer guide to Angular 2
The productive developer guide to Angular 2The productive developer guide to Angular 2
The productive developer guide to Angular 2Maurice De Beijer [MVP]
 
Introduccion app engine con python
Introduccion app engine con pythonIntroduccion app engine con python
Introduccion app engine con pythonsserrano44
 
WordPress Plugins
WordPress PluginsWordPress Plugins
WordPress Pluginsrandyhoyt
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Ran Wahle
 
implementar Laravel make auth
implementar Laravel make authimplementar Laravel make auth
implementar Laravel make authSebastian Romero
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routingBrajesh Yadav
 
devise tutorial - 2011 rubyconf taiwan
devise tutorial - 2011 rubyconf taiwandevise tutorial - 2011 rubyconf taiwan
devise tutorial - 2011 rubyconf taiwanTse-Ching Ho
 
Service Configuration Management for Rapid Growth - demo 10 steps to build pi...
Service Configuration Management for Rapid Growth - demo 10 steps to build pi...Service Configuration Management for Rapid Growth - demo 10 steps to build pi...
Service Configuration Management for Rapid Growth - demo 10 steps to build pi...Takashi Someda
 

What's hot (20)

Pundit
PunditPundit
Pundit
 
Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...
Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...
Satellite Apps around the Cloud: Integrating your infrastructure with JIRA St...
 
Einführung in Angular 2
Einführung in Angular 2Einführung in Angular 2
Einführung in Angular 2
 
Multiple Submit Button Test App
Multiple Submit Button Test AppMultiple Submit Button Test App
Multiple Submit Button Test App
 
Gigigo Rails Workshop
Gigigo Rails WorkshopGigigo Rails Workshop
Gigigo Rails Workshop
 
Ajax pagination using j query in rails3
Ajax pagination using j query in rails3Ajax pagination using j query in rails3
Ajax pagination using j query in rails3
 
The productive developer guide to Angular 2
The productive developer guide to Angular 2The productive developer guide to Angular 2
The productive developer guide to Angular 2
 
Rack
RackRack
Rack
 
Introduccion app engine con python
Introduccion app engine con pythonIntroduccion app engine con python
Introduccion app engine con python
 
WordPress Plugins
WordPress PluginsWordPress Plugins
WordPress Plugins
 
Devise and Rails
Devise and RailsDevise and Rails
Devise and Rails
 
Automation Zaman Now
Automation Zaman NowAutomation Zaman Now
Automation Zaman Now
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
 
Banquet 42
Banquet 42Banquet 42
Banquet 42
 
Meteor
MeteorMeteor
Meteor
 
implementar Laravel make auth
implementar Laravel make authimplementar Laravel make auth
implementar Laravel make auth
 
multiple views and routing
multiple views and routingmultiple views and routing
multiple views and routing
 
Easy ota intro
Easy ota introEasy ota intro
Easy ota intro
 
devise tutorial - 2011 rubyconf taiwan
devise tutorial - 2011 rubyconf taiwandevise tutorial - 2011 rubyconf taiwan
devise tutorial - 2011 rubyconf taiwan
 
Service Configuration Management for Rapid Growth - demo 10 steps to build pi...
Service Configuration Management for Rapid Growth - demo 10 steps to build pi...Service Configuration Management for Rapid Growth - demo 10 steps to build pi...
Service Configuration Management for Rapid Growth - demo 10 steps to build pi...
 

Viewers also liked

Viewers also liked (16)

R2 sociais 6
R2 sociais 6R2 sociais 6
R2 sociais 6
 
ionicSetup
ionicSetupionicSetup
ionicSetup
 
geometria y trigonometria 1.2
geometria y trigonometria 1.2geometria y trigonometria 1.2
geometria y trigonometria 1.2
 
08_HerffJones_EagleScout_Campaign
08_HerffJones_EagleScout_Campaign08_HerffJones_EagleScout_Campaign
08_HerffJones_EagleScout_Campaign
 
How to join oriflame
How to join oriflameHow to join oriflame
How to join oriflame
 
Tarea 2 informatica
Tarea 2 informaticaTarea 2 informatica
Tarea 2 informatica
 
4. a penha já foi mar?
4. a penha já foi mar?4. a penha já foi mar?
4. a penha já foi mar?
 
Relatório da visita de estudo à Penha
Relatório da visita de estudo à PenhaRelatório da visita de estudo à Penha
Relatório da visita de estudo à Penha
 
5. da penha vê se o mar
5. da penha vê se o mar5. da penha vê se o mar
5. da penha vê se o mar
 
Guião 7º 2º teste
Guião 7º 2º testeGuião 7º 2º teste
Guião 7º 2º teste
 
Guião 9º 2º teste
Guião 9º 2º testeGuião 9º 2º teste
Guião 9º 2º teste
 
Todo sobre México
Todo sobre MéxicoTodo sobre México
Todo sobre México
 
Instalacion equipo neumatico
Instalacion equipo neumaticoInstalacion equipo neumatico
Instalacion equipo neumatico
 
02_HerffJonesBranded_CollegeC&G_Brochure
02_HerffJonesBranded_CollegeC&G_Brochure02_HerffJonesBranded_CollegeC&G_Brochure
02_HerffJonesBranded_CollegeC&G_Brochure
 
Guião 8º 1º teste
Guião 8º 1º testeGuião 8º 1º teste
Guião 8º 1º teste
 
Git setuplinux
Git setuplinuxGit setuplinux
Git setuplinux
 

Similar to Socket.io Angular Setup

Building websites with Node.ACS
Building websites with Node.ACSBuilding websites with Node.ACS
Building websites with Node.ACSralcocer
 
Building websites with Node.ACS
Building websites with Node.ACSBuilding websites with Node.ACS
Building websites with Node.ACSRicardo Alcocer
 
How to build a chat application with react js, nodejs, and socket.io
How to build a chat application with react js, nodejs, and socket.ioHow to build a chat application with react js, nodejs, and socket.io
How to build a chat application with react js, nodejs, and socket.ioKaty Slemon
 
Debugging & profiling node.js
Debugging & profiling node.jsDebugging & profiling node.js
Debugging & profiling node.jstomasperezv
 
Going real time with Socket.io
Going real time with Socket.ioGoing real time with Socket.io
Going real time with Socket.ioArnout Kazemier
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...Robert Nyman
 
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...Wim Selles
 
Securing Portlets With Spring Security
Securing Portlets With Spring SecuritySecuring Portlets With Spring Security
Securing Portlets With Spring SecurityJohn Lewis
 
RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜
RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜
RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜崇之 清水
 
Introduction to Titanium and how to connect with a PHP backend
Introduction to Titanium and how to connect with a PHP backendIntroduction to Titanium and how to connect with a PHP backend
Introduction to Titanium and how to connect with a PHP backendJoseluis Laso
 
Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...Antonio Peric-Mazar
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceJen Looper
 
Fiware io t_ul20_cpbr8
Fiware io t_ul20_cpbr8Fiware io t_ul20_cpbr8
Fiware io t_ul20_cpbr8FIWARE
 
How to implement authorization in your backend with AWS IAM
How to implement authorization in your backend with AWS IAMHow to implement authorization in your backend with AWS IAM
How to implement authorization in your backend with AWS IAMProvectus
 
Download and restrict video files in android app
Download and restrict video files in android appDownload and restrict video files in android app
Download and restrict video files in android appKaty Slemon
 
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Frost
 

Similar to Socket.io Angular Setup (20)

Building websites with Node.ACS
Building websites with Node.ACSBuilding websites with Node.ACS
Building websites with Node.ACS
 
Building websites with Node.ACS
Building websites with Node.ACSBuilding websites with Node.ACS
Building websites with Node.ACS
 
How to build a chat application with react js, nodejs, and socket.io
How to build a chat application with react js, nodejs, and socket.ioHow to build a chat application with react js, nodejs, and socket.io
How to build a chat application with react js, nodejs, and socket.io
 
Socket.IO
Socket.IOSocket.IO
Socket.IO
 
Debugging & profiling node.js
Debugging & profiling node.jsDebugging & profiling node.js
Debugging & profiling node.js
 
Going real time with Socket.io
Going real time with Socket.ioGoing real time with Socket.io
Going real time with Socket.io
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
How React Native, Appium and me made each other shine @ContinuousDeliveryAmst...
 
Securing Portlets With Spring Security
Securing Portlets With Spring SecuritySecuring Portlets With Spring Security
Securing Portlets With Spring Security
 
RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜
RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜
RESTful API を Chalice で紐解く 〜 Python Serverless Microframework for AWS 〜
 
Introduction to Titanium and how to connect with a PHP backend
Introduction to Titanium and how to connect with a PHP backendIntroduction to Titanium and how to connect with a PHP backend
Introduction to Titanium and how to connect with a PHP backend
 
Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...
 
soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT Conference
 
Fiware io t_ul20_cpbr8
Fiware io t_ul20_cpbr8Fiware io t_ul20_cpbr8
Fiware io t_ul20_cpbr8
 
How to implement authorization in your backend with AWS IAM
How to implement authorization in your backend with AWS IAMHow to implement authorization in your backend with AWS IAM
How to implement authorization in your backend with AWS IAM
 
API gateway setup
API gateway setupAPI gateway setup
API gateway setup
 
Download and restrict video files in android app
Download and restrict video files in android appDownload and restrict video files in android app
Download and restrict video files in android app
 
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
Building an angular application -1 ( API: Golang, Database: Postgres) v1.0
 
REST API for your WP7 App
REST API for your WP7 AppREST API for your WP7 App
REST API for your WP7 App
 

Socket.io Angular Setup

  • 1. Socket.io with Angular js Setup Step 1. install Socket.IO to your app $ cd path/to/your/project npm install socket.io Step 2. install socketio-auth for making authenticated requests npm install socketio-auth Step 3. Add this in your app.server file var socket = require('socket.io'); var server = http.createServer(app); var io = socket.listen(server); /** * Start Server */ server.listen(8080, function () { console.log('your app server listening on port 8080 ' ); }); Step 4. On the client index.html <script src="socket.io/socket.io.js"></script> // npm module Step 5. Add socket service to your app folder (services/socket .js file). // socket service angular.module('YOUR_APP', []).service('socket', function ($rootScope) { var socket = io.connect(); socket = io(ApiRoutesListing.serverAddress, { query: { api_key: 'your_api_key'', auth_token: auth_token } }); return { on: function (eventName, callback) { socket.on(eventName, function () { var args = arguments; $rootScope.$apply(function () { callback.apply(socket, args); }); }); }, emit: function (eventName, data, callback) { socket.emit(eventName, data, function () {
  • 2. var args = arguments; $rootScope.$apply(function () { if (callback) { callback.apply(socket, args); } }); }) } }; }); Step 6. Add this service to index.html file <script type="text/javascript" src="services/socket.js"></script> //your socket service Step 7. Now add socket service to the controller angular.module('YOUR_APP', []).controller('YOUR_CONTROLLER', function ($scope, socket, .........) { socket.on('connect', function () { setInterval(function () { socket.emit('PING'); }, 2000) }); socket.on(SOCKET_EVENT_NAME', function (data) { console.log(data) //you will get socket responce(data) here //now bind this data value with your view by using $scope this will update view when //socket event occurs. }); . . . }