CODEWITHSUNDEEP
angularjsnode.jssocket.iogulp
sara
sara

Reputation: 33

How to use socket.io in angular+node project

I am new to Node.js, and I have website written in angular+node

I found a chatting room code written in angular, NodeJS and socket.io and I want to add it to my site But I got into trouble.

I tried to put these functions in the GulpFile.js but didn't work :

io.on("connection", function(socket) {..
socket.on("disconnect"...

1)Where is the right place to put them? I have all the functionalities that nedded in server and client. I just dont know where to put the functions in server side

Upvotes: 0

Views: 2324

Answers (2)

radhey shyam
radhey shyam

Reputation: 769

From backend side integration...

module.exports = (function(app){
    var server = require('http').Server(app);
    var io = require('socket.io')(server);
    io.on('connection', function(socket){
        socket.on('chat', function (data) {
            socket.broadcast.emit('newMessage', data );
            socket.broadcast.emit('onlineUser',connectedPeople);

        })
})
server.listen(3000, function () {
    console.log('connection created on port no : '+3000);
})})

// for front end side integration use service

angular.module('myApp').factory('Socket',function (socketFactory) {
return socketFactory({
ioSocket: io.connect('http://localhost:3000')
});});

Upvotes: 0

Saras Arya
Saras Arya

Reputation: 3112

Okay, I think you need to understand the difference here first between server and frontend. So your server runs on NodeJS and your frontend is on Angular. Gulpjs has nothing to do with these both. To understand what gulp exactly does is watch this. Now what you want to do is build a chatting system using Socket io. You got the code but now you are confused where to put it. So if I am correct you want to have a functionality like people login in your website with different email Id's and they want to chat with each other. How do you build this functionlaity. If this is indeed your question. Please comment below. If not please update your question so that it's more clear what exactly is you want to achieve so we can guide you.

No sara you don't put your socket io code in gulpfile. You must have created a controller in angular. It needs to link to the server.So that a pipe is established. Angular --------------- Node You need to first establish that link. How will you do that? In your index.html

Then in your nodeJS app.js Do npm install socket express --save

var express = require('express');
var app = express();
var server = require('http').Server(app); //you don't need to require a model for this. This functionality is already built in NodeJS
var io = require('socket.io')(server);

And when this is done. In the same app.js type

io.emit("this_should_be_same", {
    data: {
          lat: data.lat,
          lng: data.lng
          }
});

Now in your angular app. To make things easy. In your app.js where you give your routes and stuff. Please give this factory.

var ypurApp = angular.module('myApp',[]);
yourApp.factory('socket', function($rootScope) {

    var socket = io.connect('localhost:5040');

    return {
        on: function(eventName, callback) {
            socket.on(eventName, function() {
                var args = arguments;
                //console.log(args);
                $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);
                    }
                });
            });
        }
    };
});

Now you can inject it in any controller like

angular.module('myApp').controller('chatController',['socket', function(socket){
    socket.on("this_should_be_same", function(data){
    console.log(data);
});
}]);

This should do it. I know you will come up with doubts feel free to ask me.

Upvotes: 1

Related Questions