Angular 2 cli project -Socket.io not working

Question

Folks, I have a angular 2 Cli project. Its a simple chatting application. But for some reasons, server is not receiving/sending message to client. There is no compile error and app works but no socket messaging. Below is the code snippet from each:

Express:

 const express = require('express');
 const path = require('path');
 const http = require('http');
 const bodyParser = require('body-parser');


 const app = express();

 // Parsers for POST data
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));

 // Point static path to dist
 app.use(express.static(path.join(__dirname, 'dist')));


  // Catch all other routes and return the index file
  app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'dist/index.html'));
   });

 /**
  * Get port from environment and store in Express.
  */
  const port = process.env.PORT || '3000';
 app.set('port', port);

/**
 * Create HTTP server.
 */
 const server = http.createServer(app);

  //set socket.io for chat
   var io = require('socket.io').listen(server);
  io.on('connnection', (socket) => {
  console.log('user connected');
  socket.on('message', (msg) => {
    console.log('Message Received: ', msg);
    socket.broadcast.emit('message', msg);
  });
  socket.on('disconnect', () => {
    console.log('user has disconnected');
  });


   });


     server.listen(port, () => console.log("server running"));

App component

import { Component } from '@angular/core';
import * as io from "socket.io-client";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
 export class AppComponent {
  messages: Array<String>;
  chatBox: String;
  socket: any;
 constructor() {
  this.chatBox = "";
     this.socket = io("http://localhost:3000");
      this.socket.on("message", (msg) => {
        this.messages.push(msg);
      });
  }
  send(message) {
     this.socket.emit("message", message);
     this.chatBox = "";
  }

 }

Html:

  <ul>
   <li *ngFor="let item of messages">{{item}}</li>
  </ul>

 <input [(ngModel)]="chatBox" autocomplete="off" />
  <button (click)="send(chatBox)">Send</button>

I would appreciate any help or hint to resolve this.

If I simple express based server with html chatting works fine.

Thanks

One of my working code .. https://gist.github.com/parthghiya/7a03cbf2bb5be5af7746e06a0d7d24fe — Parth Ghiya, Feb 07 '17 at 13:07
i am talking about the front end /Angular 2 ... Any errors in browser console ? No console.logs because socket is not connected at all. — Parth Ghiya, Feb 07 '17 at 14:08
Nope, clean .. no errors at all.. neither on browsers nor at server side. Is your project angular2 cli based? — leo, Feb 07 '17 at 14:15
Is your project available on github? Can you share it pls? I'll debug it — leo, Feb 07 '17 at 16:50
i debugged it, there is socket object and a field disconnected=true and connected=false; how to connect it? is there any other way or setting i need to look into? — leo, Feb 07 '17 at 16:59

score 0 · Answer 1 · answered Feb 07 '17 at 17:06

0

There's no code for connection to socket at all.

Change

this.socket = io("http://localhost:3000");

to

   this.socket=io.connect("http://localhost:3000")

answered Feb 07 '17 at 17:06

Parth Ghiya

6,929
2
30
37

not helping.... how did you read socket.io on client side? did you add script on angular-cli.json or put in index.html or you put in index.html – leo Feb 07 '17 at 18:46

Angular 2 cli project -Socket.io not working

1 Answers1