Ad

Adding Socket.io To An Existing Express Project (with React On The Front)

I have an existing project written in Express, where I've made a messaging system. Everything was working on POST/GET methods (to send and receive the messages). I wanted to make them appear in real time, so I installed socket.io both on the client and server side. In my server.js I added these lines:

const http = require("http");
const io = require("socket.io");
const server = http.createServer();
const socket = io.listen(server);

and changed my app.listen(...) into server.listen(...). Added also:

socket.on("connection", socket => {
    console.log("New client connected");
    socket.on('test', (test) => {
        console.log('test-test')
    });

    socket.emit('hello', {hello:'hello!'});

        socket.on("disconnect", () => console.log("Client disconnected"));
});

On the front part I put such code in the componentDidMount method:

const socket = socketIOClient();
socket.emit('test', {test:'test!'})
socket.on('hello', () => {
    console.log('aaa')
})

Now I got 2 problems. Although the console.log() works correctly, I get an error on the React app:

WebSocket connection to 'ws://localhost:3000/sockjs-node/039/lmrt05dl/websocket' failed: WebSocket is closed before the connection is established.

Is that normal?

Also, when I change app.listen(...) into server.listen(...) in the server.js file, my routing stops working. All the POST and GET methods don't work, because the server is responding endlessly. Is that possible to use the socket.io just on a specific method in a specific routing file?

I keep my routes that way: app.use('/api/user', user); where user is a router file.

UPDATE: full server.js require:

const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const bodyparser = require('body-parser');
const passport = require('passport');

const user = require('./routes/api/v1/User');
const company = require('./routes/api/v1/Company');

const http = require("http");
const io = require("socket.io");


const app = express();

dotenv.config();
app.use(passport.initialize());
require('./config/seed');

require('./config/passport')(passport);
const server = http.createServer();
const socket = io.listen(server);

Ad

Answer

You're not initializing server properly. Try making the following change

// const server = http.createServer();
const server = http.createServer(app);

and make sure you listen on server and not io

server.listen(PORT_GOES_HERE)

[UPDATE] Working Example:

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);
// WARNING: app.listen(80) will NOT work here!

// DO STUFF WITH EXPRESS SERVER
app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

For more details check this: https://socket.io/docs/

Ad
source: stackoverflow.com
Ad