Day

Regarding to this post I want to show you how you can set up a chat-client to a node.js-server via angular.js. We will take a look into the lightweight architecture angular is giving you and how to set up the services and controllers the right way. Additionally we will use the loading-bar-module to give the user information about what his message is doing after sending it and we will flash the homepage title if a new message arrives. The communication is done with socket-io.js and we use jQuery for the basic javascript-things. Enjoy!

READ MORE

Recently at the “Noser E-Days”, a company wide team meeting. We decided to build a little chat server with node.js and various chat client implementations with java script frameworks like angular.js. I got the task to write the chat server and was amazed on how easy it was to realize it with node.js.

Following the steps I needed to get the chat server working:

 Step 1: node.js Installation

1. Get node.js for your OS ->  nodejs.org
2. Install it (normally you can use the default installation settings)

Step 2: Chat Server (Project) Setup

1. Create the folder which will contain your chat server.
   In my case it’s C:\DevProjects\Lokal\chatserver
2. Get the socket.io module via npm (Node Packaged Module) which we need for communication
   1. Open the node.js command prompt and navigate to the directory created above
   2. Type “npm install socket.io” which installs the socket.io module and its dependencies in the local directory
   3. You also get the socket.io.js file for the client side (./node_modules/socket.io/node_modules/socket.io-client/socket.io.js)

Step 3: Chat Server Logic

1. Create a chatserver.js file which will contain the chat server logic which will be executed by the node.js runtime
2. Add following code which configures your chat server to accept connections and send the incoming messages to all connected clients

chatserver.js

//settings
var websocketPort = 1980;

// start websockets
var io = require('socket.io').listen(websocketPort);
console.log('chat server is running on port ' + websocketPort);

//websocket communication
io.sockets.on('connection', function(socket){
      // tell all clients who has connected
      var ipAddress = socket.handshake.address.address;
      io.sockets.emit('chat', {name: ipAddress, text: 'joined chat'});
      console.log('client [' + ipAddress + '] connected');

      // relay message of client to all other clients
      socket.on('chat', function(data){
            io.sockets.emit('chat', {name: data.name, text: data.text});
      });

      // tell all clients who has disconnected
      socket.on('disconnect', function(){
            io.sockets.emit('chat', {name: ipAddress, text: 'left chat'});
            console.log('client [' + ipAddress + '] disconnected');
      });
});

That’s all you need for simple little chat server. I think the code is pretty self-explanatory. Here are just some key points:

• sockets.emit: sends an event to all connected clients (sockets)
• socket.emit: sends an event to a specific client (socket)
• socket.on(‘eventName’): reacts to a specific event. There are predefined events like ‘connect’ and ‘disconnect’. But you can also define your own events like ‘chat’ etc.

Step 4: Run Chat Server

1. Open the node.js command prompt and navigate to the project directory
2. Type “node chatserver.js” which starts the server
3. The server is now ready and waits for clients

Download Chat Server Example

Next Step: Write a Chat Client

Read Fabian Gosebrink’s article about creating a chat client which interacts with the chat server.
Be sure to use the correct socket.io.js file for your client. You get it from the chat server directory (./node_modules/socket.io/node_modules/socket.io-client/socket.io.js)