HTML button communicating with Node server + Socket.io

Question

When a user clicks an html button (#new) I want to store their socket.id into an array (userQueue) on my node server but I'm having trouble figuring out how to do this. Do I need to set up a post request or is there a way through socket.io?

App.js (Server):

// App setup
var express      = require('express'),
   socket        = require('socket.io'),
   app           = express(),
   bodyParser    = require("body-parser");

var server = app.listen(3000, function() {
   console.log('listening to requests on port 3000');
});
var io = socket(server);

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('public'));

// Room Logic
var userQueue = [];

io.on('connection', function(socket) {
   console.log('made socket connection', socket.id);

   socket.on('chat', function(data) {
      io.sockets.emit('chat', data);
   });

   socket.on('typing', function(data) {
      socket.broadcast.emit('typing', data);
   });

});

Chat.js (client side):

// Make connection
 var socket = io.connect('http://localhost:3000');


// Query DOM
var message  = document.getElementById('message');
    handle   = document.getElementById('handle'),
    btn      = document.getElementById('send'),
    btnNew   = document.getElementById('new'),
    output   = document.getElementById('output'),
    feedback = document.getElementById('feedback');

// Emit events
btn.addEventListener('click', function(){
   socket.emit('chat', {
      message: message.value,
      handle: handle.value
   });
});

message.addEventListener('keypress', function() {
   socket.emit('typing', handle.value);
});

// Listen for events
socket.on('chat', function(data) {
   feedback.innerHTML = ""
   output.innerHTML += '<p><strong>' + data.handle + ':</strong>' + data.message + '</p>'
});

// Emit 'is typing'
socket.on('typing', function(data) {
   feedback.innerHTML = '<p><em>' + data + ' is typing a message...</em></p>'
});

Index.html:

<!DOCTYPE html>
<html>
<head>
   <title>WebSockets 101</title>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
   <link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
   <div id="mario chat">
      <div id="chat-window">
         <div id="output"></div>
         <div id="feedback"></div>
      </div>
      <input id="handle" type="text" placeholder="Handle">
      <input id="message" type="text" placeholder="Message">
      <button id="send">Send</button>
      <button id="new">New</button>
   </div>
   <script type="text/javascript" src="/chat.js"></script>
</body>
</html>

umop apisdn · Accepted Answer · 2017-07-21 01:54:42Z

1

I believe that a post request will probably work as well, but if you want to simply work with socket.io you can consider doing something similar to your chat event by adding this in your chat.js:

btnNew.addEventListener('click', function() {
   socket.emit('new user', socket.id);
});

And on the server side, app.js:

socket.on('new user', function(id) {
   userQueue.push(id);
});

And it should be stored in the array. Hope this helps!

edited Jul 21, 2017 at 1:54

answered Jul 21, 2017 at 1:43

umop apisdn

6839 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

umop apisdn Over a year ago

you're welcome :) a note of advice though: if you only want the id to be added once to the array remember to check whether it already exists in the array/disable the button after the first click event!

Collectives™ on Stack Overflow

HTML button communicating with Node server + Socket.io

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related