server sided code
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
io.once('connection', function (socket) {
console.log(`New connection`)
socket.emit('hello', 'hello from the server')
socket.on('clientData', (data) => {
console.log(data)
})
})
server.listen(3000, () => {
console.log(`Server started: http://localhost:${port}`)
})
Client side code:
var socket = io()
var hello = 'Hello server'
socket.on('connection', function() {
console.log('established connection')
socket.emit('clientData', hello)
})
socket.on('hello', function(data) {
console.log(data)
})
When run the client doesnt emit the 'clientData' for some reason, what am I doing wrong.
I think your socket.on("connection", use on the client is misguided. The connection event happens at the server when new clients join.
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
io.on('connection', function (socket) {
// #2 - This will run for the new connection 'socket' and set up its callbacks
// #3 - send to the new client a 'hello' message
socket.emit('hello', 'hello from the server')
socket.on('clientData', (data) => {
// #6 - handle this clients 'clientData'
console.log(data)
})
})
server.listen(3000, () => {
console.log("Server started: http://localhost:${port}")
})
Client side code:
// #1 - this will connect to the server and send the 'connection'
var socket = io()
var hello = 'Hello server'
socket.on('hello', function(data) {
// #4 - 'hello' response after connecting
console.log(data)
// #5 - send 'clientData'
socket.emit('clientData', hello)
})
Related
I am very new to this socket programming. I got confused when to use io and socket in below code. Here, when a new user connects to the server and listens to any events then we use socket.on for that but while sending back response we use io.emit, cant we use socket.emit here? and what is the difference between them?
const express = require('express');
const app = express();
const PORT = 4000;
const http = require('http').Server(app);
const cors = require('cors');
app.use(cors());
const io = require('socket.io')(http, {
cors: {
origin: "http://localhost:3000"
}
});
let users = [];
io.on('connection', (socket) => {
console.log(`⚡: ${socket.id} user just connected!`);
socket.on('newUser', (data) => {
users.push(data);
io.emit('newUserResponse', users);
});
socket.on('message', (data) => {
console.log(data);
io.emit('messageResponse', data);
});
socket.on('disconnect', () => {
console.log('🔥: A user disconnected');
users = users.filter((user) => user.socketID !== socket.id);
io.emit('newUserResponse', users);
socket.disconnect();
});
});
app.get('/api', (req, res) => {
res.json({
message: 'Hello world',
});
});
http.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
I want to build a ReactJS/NodeJs app with Socket IO.
I am able to establish a socket connection between the client and the server, but whenever I press the button to emit a message, nothing happens on the server side, meaning the console.log('new message:', msg)is not triggered.
Client code:
import React from 'react';
import io from 'socket.io-client';
const socket = io.connect('http://localhost:4000');
function App() {
socket.on('message', msg => {
console.log('new message:', msg);
});
const handleMessageSend = () => {
socket.emit('message', 'test');
}
return (
<button onClick={handleMessageSend}>Send</button>
);
}
export default App;
Server:
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
io.on('connection', socket => {
socket.on('message', msg => {
console.log('new message:', msg);
socket.emit('message', msg)
})
})
http.listen(4000, () => {
console.log('Listening on port 4000');
})
Any ideas ? Thanks a lot in advance
I have moved socket code inside handleMessageSend.
And you can add preventDefault to prevent your page refreshing (I am not sure if you need this because you are not using a form and submit button, but you can use it for now.)
Can you please try this and let me know if it works?
React component:
import io from 'socket.io-client';
function App() {
let serverUrl = 'localhost:4000'
let socket = io(serverUrl);
const handleMessageSend = (e) => {
e.preventDefault();
socket.emit("message", "test message")
socket.on("message", function(msg){
console.log("socket working on the frontend: ", msg);
});
}
return (
<button onClick={handleMessageSend}>Send</button>
);
}
export default App;
And here server file :
const express = require ("express");
const socket = require ("socket.io");
const app = express();
const server = app.listen(4000, () => {
console.log('Listening on port 4000');
})
const io = socket(server);
io.on('connection', socket => {
socket.on('message', msg => {
console.log('socket working at the backend', msg);
io.sockets.emit('message', msg)
})
})
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
I am going to make a private chat app like WhatsApp.
I connect to the server successfully
but the socket after several seconds gets disconnect from the server.
while on the client it doesn't disconnect.
Server code:
const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = 3000;
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
const onlineusers = {};
const socketid = {};
io.on('connection', cs => {
cs.on('online', username => {
if(username){
onlineusers[username] = cs.id;
socketid[cs.id] = username;
}
console.log("\nonline: ", onlineusers);
});
cs.on('disconnect', () => {
delete onlineusers[socketid[cs.id]];
console.log("\noffline: ", onlineusers);
});
});
const chat = io.of("/chat");
chat.on('connection', cs => {
cs.on('startchat', username => {
if (username){
chat.to('/chat#'+onlineusers[username]).emit('hey', 'I love programming');
}
});
});
server.listen(port, err => {
if(err){
console.error("Some Error: "+err);
}else{
console.log(`Server is running on port: ${port}`);
}
});
MY CLIENT code is by react-native and socket.io-client:
On line users file:
import io from 'socket.io-client';
const SocketEndpoint = 'http://192.168.43.172:3000';
this.socket = io(SocketEndpoint, {
transports: ['websocket']
});
this.socket.on('connect', () => {
if (this.state.username) {
this.socket.emit("online", this.state.username);
}
});
this.socket.on('connect_error', (err) => {
Alert.alert(err);
});
this.socket.on('disconnect', () => {
Alert.alert('disconnected');
});
Chat page file:
import io from 'socket.io-client';
const SocketEndpoint = 'http://192.168.43.172:3000/chat';
this.socket = io(SocketEndpoint, {
transports: ['websocket']
});
this.socket.on('connect', () => {
if (theirusername) {
this.socket.emit('startchat', theirusername);
}
this.socket.on('hey', data => {
alert(data);
});
this.socket.on('janajan', data => {
alert(data);
});
});
I want to keep to client socket on the server until the client themselves gets the disconnect.
because here when I want to say hey it gets a disconnect and my message could pass to the client.
thank you before
When no room is specified client receive the message but when specify a room I am unable to receive message on client.
server.js
var socket = require('socket.io');
var mysql = require('mysql');
const path = require('path');
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = socket.listen(server);
var port = PORT;
io.on('connection', (socket) => {
console.log('new connection made');
socket.on('subscribe', function (room) {
socket.room = room;
socket.join(socket.room, function () {
console.log('joined:' + room); // outputs joined: 1
socket.on('send-message', (data) => {
io.to(data.room).emit('message-received', data.message);
console.log("sent to room:" + data.room); // outputs sent to room: 1
});
});
});
});
server.listen(port, function () {
console.log('Server listening at port %d', port);
});
client.js
this.socket = io.connect('ws://IP:PORT');
this.socket.on('connect', () => {
console.log("connection made"); // it output connection made in console
this.socket.emit('subscribe', 1);
});
this.socket.on('message-received', (message: any) => {
console.log(message);
});
on server.js I have tried several options below but still unable to emit 'message-received' on client side:
// io.emit('message-received', data);
// io.to(data.room).emit('message-received', {
// room: data.room,
// message: data.message
// });
// io.sockets.in(data.room).emit('message-received', {
// room: data.room,
// message: data.message
// });
//io.broadcast.to(data.room).emit('message-received', data.message);
using latest socket.io library with angular 4
based on what i see on your clientside and serverSide code, I believe the problem is in the clientSide code...
On your server, inside the 'subscribe' event the server is also listening for 'send-message' event, which you're never emiting from the client side!!
Therefore, if you emit 'send-message' event with data(this should include message) as parameter, only then the server would emit 'message-received' event to the client..
HOPE THIS HELPS!