CODEWITHSUNDEEP
node.jsexpresswebsocketsocket.io
Huro Moto
Huro Moto

Reputation: 39

Issue with socket.io join room

I have a issue with socket.io with rooms.

See the server code:

This code below is working properly.

io.on('connection', function(socket){

 socket.join("myroom");

 socket.on('chat message', function(data){
  io.in("myroom").emit('chat message', data);
 });


});

But I want the user to enter the room after an event. Like the code below.

io.on('connection', function(socket){

 socket.on('chat message', function(data){
  io.in("myroom").emit('chat message', data);
 });

 socket.on('join', function(name, device, room){
   socket.join("myroom");
 });


});

It's almost the same code , but does not work. What am I doing wrong?

The event is being called correctly.

Edit. Added the front-end code:

var socket = io.connect('http://localhost:5000');



   $('#msg_form').submit(function(){
     socket.emit('chat message', $("#m").val(), "myroom");
     $('#m').val('');
     return false;
   });

   $("#user").submit(function() {
      var name = $("#name").val();
      var room = $("#room").val();
      var device = navigator.userAgent;

      if (name === "" || name.length < 2) {
        $("#errors").empty();
        $("#errors").append("Please enter a name");
        $("#errors").show();
      } else {
        socket.emit("join", name, device, room);
        $("#messages").focus();
      }
    });

Thank you.

Upvotes: 1

Views: 1828

Answers (2)

aitnasser
aitnasser

Reputation: 1246

I made this small demo to explain, I simulate the client-side event by setTimeout functions:

Server side:

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

server.listen(9999);

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {

  socket.on('message', function(data){
  io.in("myroom").emit('message', data);
 });

 socket.on('join', function(name, device, room){
  console.log("new client has joining a room");
   socket.join("myroom");
 });
  });

Client Side:

    <script src="/socket.io/socket.io.js"></script>
<script>


var socket = io.connect('http://localhost:9999');

setTimeout(function () { console.log("msg emmited to server");
    socket.emit('join');

}, 

    10000);
setTimeout(function () {
 console.log("msg emmited to server");
    socket.emit("message","message from client");
}, 

    20000);

socket.on("message",function(data){
  console.log("message received from server ="+data);
    }
    );

</script>

Upvotes: 4

jfriend00
jfriend00

Reputation: 707148

In your $("#user").submit(...) handler, you do not prevent the default action of the form so it is likely that the page is reloaded right after you hit the submit button. And, this will reset your connection right after you hit join, giving you a newly initialize connection that is not joined into the room.

You can either add return false; to that handler or add the e argument to the handler and call e.preventDefault() to prevent the page from reloading when you hit submit.

  $("#user").submit(function(e) {
      e.preventDefault();
      var name = $("#name").val();
      var room = $("#room").val();
      var device = navigator.userAgent;

      if (name === "" || name.length < 2) {
        $("#errors").empty();
        $("#errors").append("Please enter a name");
        $("#errors").show();
      } else {
        socket.emit("join", name);
        $("#messages").focus();
      }
    });

Upvotes: 2

Related Questions