I am having a problem with socket.io
There is no way I can see in the console.log when i try to connect to localhost:8080, the server is working but my socket which is properly bind to the server never says "new connection".
Can you help me please ?
import express from "express";
import socket from "socket.io";
const app = new express();
const server = app.listen(`${process.env.PORT_API}`, () => {
console.log(`Server is running on port ${process.env.PORT_API}`);
});
const io = new socket(server);
io.on('connection', (socket) => {
console.log("new connection");
})
const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', () => {
console.log("new connection");
});
server.listen(`3000`, () => {
console.log(`Server is running on port 3000`);
});
Reference: Link here
Related
I have read blogs and seen videos where this results in successful connection between the server and client, but for some reason it doesn't seem to work on my system.
This is the code on the server side:
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const PORT = 3001;
io.on('connection', socket => {
console.log('a user connected.');
});
http.listen(PORT, () => {
console.log('listening on port ' + PORT);
});
And this is the code on the client side:
import React, { useEffect } from 'react';
import io from 'socket.io-client';
const socket = io('http://127.0.0.1:3001');
function Test() {
return (
<div>
Test
</div>
)
}
export default Test;
I have checked the versions of both socket.io and socket.io-client and they are at 3.0.4
I have tried using io.connect(url) instead of just io(url)
I have tried replacing 127.0.0.1 with localhost and even 192.168.29.101. (I'm sorry, just a beginner and not sure how these things work in depth).
Thanks for all the help!
You could try to wrap the socket in useEffect() and add transports. Something like that:
import React, { useState, useEffect } from "react";
import openSocket from "socket.io-client";
function App() {
const [response, setResponse] = useState("");
useEffect(() => {
const socket = openSocket("http://localhost:3001", {
transports: ["websocket"],
});
socket.on("message", data => {
setResponse(data);
});
}, []);
return (
<p>
{response}
</p>
);
}
export default App;
In your server you need to specify the event to emit:
const express = require("express");
const app = express();
const server = app.listen(3001, () => {
console.log("listening on port 3001");
});
const io = require("socket.io")(server);
io.on("connection", (socket) => {
console.log("Client connected");
socket.emit("message", "Hello Socket!");
});
i want to use socket-io in my project and i established it on the server (node-js) and
the client (react) but it seems doesn't work fine and in console on the server i can't see user connected when user connected.
app.js (server):
const express = require("express");
const app = express();
const PORT = process.env.PORT || 5000;
(async () => {
await mongoConnect(error => {
if (error) {
console.log(error);
} else {
const server = app.listen(PORT, () =>
console.log(`server is running on ${PORT} port`)
);
const io = require("./utils/socket-io/socket-io").initialSocket(server);
io.on("connection", socket => {
console.log("user connected");
});
}
});
})();
socket-io.js (server):
const socketIo = require("socket.io");
let io;
module.exports = {
initialSocket: server => {
io = socketIo(server);
return io;
},
getIo: () => {
if (!io) {
throw new Error("no connection to socket-io");
}
return io;
}
};
posts.js (client):
import socketIo from "socket.io-client";
useEffect(() => {
socketIo("http://localhost:5000");
}, [socketIo]);
Edit your app.js to this
const http = require('http');
const socketio = require('socket.io');
const app = express();
const server = http.createServer(app); // This is going to allow us to create a new web server for express and we're going to it to our express application
const io = socketio(server); // Configure socketio to work with a given server
// Now the server supports websockets
(async () => {
await mongoConnect(error => {
...
else {
io.on("connection", socket => {
console.log("user connected");
});
server.listen(port, () => console.log(`Server is up on port ${port}`));
}
});
})();
So, I'm learning about websockets...the below code is from a tutorial which I have been playing with..when I connect to it via a react app, the date updates as expected each second. when I then connect to it using another browser tab or my mobile, the newest instance updates as expected, however the older ones now stop.
I would have expected the setInterval to clear and restart, emitting to all devices so they update together.
Can someone advise me please? If I comment out the clear intervals, it works as expected however I know this is a no no as it will just create more and more interval events..
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const port = process.env.PORT || 4001;
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server);
let interval;
io.on("connection", (socket) => {
console.log("New client connected");
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => getApiAndEmit(socket), 1000);
socket.on("disconnect", () => {
console.log("Client disconnected");
clearInterval(interval);
});
});
const getApiAndEmit = socket => {
const response = new Date();
// Emitting a new message. Will be consumed by the client
socket.emit("Test1", response);
};
server.listen(port, () => console.log(`Listening on port ${port}`));
Hi #Lawrence Ferguson,
So what we are doing here is instead of using a single internval instance, we are creatings intervals by socket's uniq id.
By the way, passing socket object around is really not that good :)
const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const port = process.env.PORT || 4001;
const index = require("./routes/index");
const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server);
let intervals = {};
io.on("connection", (socket) => {
console.log("New client connected");
// this is probably never gonna called,
// cause you will get another socket.id when you connect again
// So :D
if (intervals && intervals[socket.id]) {
clearInterval(intervals[socket.id]);
}
// instead of using a outside function
// intervals[socket.id] = setInterval(() => getApiAndEmit(socket), 1000);
// I'm always trying to use an internal val
intervals[socket.id] = setInterval(() => {
socket.emit("Test1", new Date());
}, 1000);
// But obv how ever you want to use :)
socket.on("disconnect", () => {
console.log("Client disconnected");
clearInterval(intervals[socket.id]);
});
});
const getApiAndEmit = socket => {
const response = new Date();
// Emitting a new message. Will be consumed by the client
socket.emit("Test1", response);
};
server.listen(port, () => console.log(`Listening on port ${port}`));
I am trying to establish socket.io connection between nodejs and react-native. But unfortunately it is not working.
The issue is that client side do not get connected with server via sockets.
Here is nodejs (server-side) code
const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);
server.listen(process.env.PORT || 8000, () => console.log('server is running on port 8000'));
app.use(express.static('client/build'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
io.on('connection', socket => {
console.log('connection')})
Here is react-native(client-side) code (trimmed)
import React from 'react'
import { Button } from 'react-native'
import io from 'socket.io-client';
const Room = props => {
const sock = useRef();
useEffect(() => {
sock.current = io.connect(<HOSTNAME>, {
forceNode: true,
transports: ['websocket'],
});
//to check if mobile connected to server
console.log('test');
console.log('check 11', sock.current.connected);
sock.current.on('connect', function() {
console.log('check 2', sock.current.connected);
});
});
}
When I try to connect I am not getting 'check 2' message in my console, which is to be printed on execution of sock.current.on('connect'....
Libraries used: react-native version:0.62.1, socket.io-client version:2.3.0 (client-side), socket.io version:2.3.0 (server-side)
I have a really simple NodeJS app that I want to run on Heroku. This is how the index.js file looks like:
Server (port 3030)
const http = require('http');
const os = require('os');
const express = require('express')
const throng = require('throng'); // For cluster management
const { port, env, isProduction } = require('./config/vars');
const SocketIO = require('socket.io');
// Setting up a simple express app and wrapping it with http server
const setupServer = () => {
const app = express();
app.use(express.static(path.join(__dirname, '../public')));
const server = http.createServer(app);
return server;
};
const setupSocket = (server) => {
const io = new SocketIO(server);
io.on('connection', (socket) => {
console.log(`[Socket] Connection established: ${socket.id}`);
socket.on(msg.rooms.join, (room) => {
socket.join(room);
socket.to(room).emit(msg.rooms.joined);
console.log(`[Socket] User ${socket.id} joined '${room}' room`);
});
socket.on('disconnect', () => {
console.log(`[Socket] Distonnected: ${socket.id}`);
});
});
return io;
};
const WORKERS = (() => {
if (!isProduction) return 1;
return process.env.WEB_CONCURRENCY || os.cpus().length;
})();
async function master() {
console.log(`Preparing ${WORKERS} workers...`);
console.log('Master started.');
}
// There should be one server instance for each worker
const start = () => {
const server = setupServer(); // Returns and `http` server instance
const socket = setupSocket(server);
server.listen(port, async () => {
Logger.info(`Server – listening on port ${port}`);
});
return server;
};
const instance = throng({
workers: WORKERS,
lifetime: Infinity,
start,
master,
});
module.exports = instance;
Client (port 3000)
const setupSocket = ({ room }) => {
// Fallback if already setup
if (window.sockets[room]) {
return window.sockets[room];
}
const socket = io('http://localhost:3030');
socket.on('connect', () => {
console.log('[Socket] Connection established!', socket.id);
socket.emit('room.join', room);
});
socket.on('room.joined', () => {
console.log(`[Socket] Connected to ${room} room!`);
});
window.sockets[key] = socket;
return socket
};
The problem – the connection is sometimes established properly but most of the time I get an error
Error during WebSocket handshake: Unexpected response code: 400
What might be the problem here? Is it because I have it on two different ports or is it because of the clusters?
I've tried removing the throng part of the code, and just calling start() method without any cluster setup, but the problem remains :(
why would you use http module? The server instance that you send in the socketIO constructor should be the return object of the expressInstance.listen
Something more like this:
const express= require('express')
const app = express()
const socketio = require('socket.io')
app.use(express.static(__dirname + '/public'))
const server = app.listen('4000',()=>{
console.log('Listening to port:4000')
})
const io = socketio(server)
io.on('connect',(socket)=>{
socket.broadcast.emit('new_user')
socket.on('new_message',(message)=>{
io.emit('new_message',message)
})
})
source code: socket-io chat