CODEWITHSUNDEEP
node.jsreactjswebsocketsocket.iorestify
Facundo La Rocca
Facundo La Rocca

Reputation: 3866

ReactJS Socket.io-client does not connect

I've built a client-server web socket app.

The problem I'm facing is that the client does not connect still when the server receives the connection.

Server Side

let restify = require('restify')
let server = restify.createServer()
let socketio = require('socket.io')

server.use(restify.bodyParser())
server.use(restify.queryParser())
server.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type')

  next()
})

//Adding routes here

server.listen(3000, function () {
  console.log('%s listening at %s', server.name, server.url)
})

let websocket = socketio.listen(server.server, { path: '/api/chat/connect', origins: 'http://localhost:* http://127.0.0.1:*' });
websocket.on('connection', (socket) => {
  // I see this log when the client connects
  console.log('new client connected')
  socket.on('disconnect', () => {
    // I see this log when the client disconnects
    console.log('Client disconnected.');
  });
})

//Test connection
websocket.emit('new-message', { message: 'Connection done!!!' })

Client Side

let io = require('socket.io-client')
let socket = io.connect('http://localhost:3000/api/chat/connect', { path:'/api/chat/connect', reconnect: true, forceNew: true })

//Debugging here I noticed that socket.connected == false

//Intent 1
socket.on('new-message', (data) => {
  //Nothing happening here
})

//Intent 2
socket.on('connect', function(){
    //Nothing happening here
    socket.on('new-message', function(data){
      //Nothing happening here
    });
});

//Intent 3
socket.on('new-message', (data) => {
  //Nothing happening here
})

socket.connect()

After connecting from client side calling io.connect the server receives correctly the connection. But debugging just right after io.connect, I noticed that socket.connected == false.

package.json - Server

{
  "dependencies": {
    ... stuff
    "restify": "4.1.x",
    "socket.io": "^1.7.3"
    ... stuff
  },
  "engines": {
    "node": "0.8.x"
  }
}

package.json - Client

{
  ... stuff
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^3.0.2",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "socket.io-client": "^1.7.3"
  },
  ... stuff
}

Upvotes: 2

Views: 2173

Answers (1)

ShabbY
ShabbY

Reputation: 896

It may be the missing setup for the namespace. In order to resolve this, you need to set up a custom namespace on your server-side for the path "/api/chat/connect" like so:

let websocket = socketio.listen(server.server, { path: '/api/chat/connect', origins: 'http://localhost:* http://127.0.0.1:*' });
let nsp = websocket.of('/api/chat/connect');
nsp.on('connection', (socket) => {
  // I see this log when the client connects
  console.log('new client connected')
  socket.on('disconnect', () => {
    // I see this log when the client disconnects
    console.log('Client disconnected.');
  });
})

Here you find more information about the custom namespaces

https://socket.io/docs/rooms-and-namespaces/#custom-namespaces

When you run your server-sided code, try to prepend "DEBUG=socket.io* " to see logs emitted by socket.io

e.g. in your package.json scripts 

scripts:{
    start: "DEBUG=socket.io* node index.js",
    ...
}

Upvotes: 1

Related Questions