OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Navigating pages while using sockets.io

  • Thread starter Thread starter Allan
  • Start date Start date
A

Allan

Guest
I clearly understand that when you refresh or your user goes to another page the original socket will be destroyed and a new socket created for the next page.

That's okay, I can live with that.

My server is storing a few objects that have all the user info I need. When the user joins or leaves the first page, I store a few ID cookies on the client. When they open the next page, I read the cookies, send them to the server and the user is re-connected to their data on the server.

My question is how to I navigate thru pages.

I thought a simple

Code:
window.location.href="page2.html"

on the client side would work, but I'm getting "cannot GET" errors. This may not even be the proper way to change pages using sockets. My clients could all be on different pages. How do I manage the navigation of my clients?

HTML Page

Code:
<html>
  <head>
    <title>Page Test</title>
    <link rel="stylesheet" href="/static/style1.css">
    <link rel="icon" href="/static/open-book.ico" type="image/x-icon"/>
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <br><br>
    <input type="button" class="button" onclick="btnChgPage()" value="Change page">
  </body>
  <script src="/static/cookies.js"></script>
  <script src="/static/game.js"></script>
  
</html>

Client JS

Code:
var socket = io();
console.log("Version 3");

socket.on('connect', function() {   
  console.log('connected');
});

function btnChgPage() {
  console.log("changing page"); 
  setCookie("name", "testingTommy", 15000)
  window.location.href = 'http://localhost:5000/page2.html';
}

Server JS

Code:
var express = require('express');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');

var app = express();
var server = http.Server(app);
var io = socketIO(server);

app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static'));

// Routing
app.get('/', function(request, response) {
  response.sendFile(path.join(__dirname, 'index.html'));
  console.log(request);
});

server.listen(5000, function() {
  console.log('Starting server on port 5000');
});


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

  console.log("new connection");  
  
 //--------------------------------------------------- 
  socket.on("disconnect", (reason) => {
    /* for (const room of socket.rooms) {
      if (room !== socket.id) {
        socket.to(room).emit("user has left", socket.id);
        console.log(`user left ${room}`);
      }
    } */
    console.log("user left");
  });  
});

<p>I clearly understand that when you refresh or your user goes to another page the original socket will be destroyed and a new socket created for the next page.</p>
<p>That's okay, I can live with that.</p>
<p>My server is storing a few objects that have all the user info I need. When the user joins or leaves the first page, I store a few ID cookies on the client. When they open the next page, I read the cookies, send them to the server and the user is re-connected to their data on the server.</p>
<p>My question is how to I navigate thru pages.</p>
<p>I thought a simple</p>
<pre><code>window.location.href="page2.html"
</code></pre>
<p>on the client side would work, but I'm getting "cannot GET" errors. This may not even be the proper way to change pages using sockets. My clients could all be on different pages. How do I manage the navigation of my clients?</p>
<p>HTML Page</p>
<pre><code><html>
<head>
<title>Page Test</title>
<link rel="stylesheet" href="/static/style1.css">
<link rel="icon" href="/static/open-book.ico" type="image/x-icon"/>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<br><br>
<input type="button" class="button" onclick="btnChgPage()" value="Change page">
</body>
<script src="/static/cookies.js"></script>
<script src="/static/game.js"></script>

</html>
</code></pre>
<p>Client JS</p>
<pre><code>var socket = io();
console.log("Version 3");

socket.on('connect', function() {
console.log('connected');
});

function btnChgPage() {
console.log("changing page");
setCookie("name", "testingTommy", 15000)
window.location.href = 'http://localhost:5000/page2.html';
}
</code></pre>
<p>Server JS</p>
<pre><code>var express = require('express');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');

var app = express();
var server = http.Server(app);
var io = socketIO(server);

app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static'));

// Routing
app.get('/', function(request, response) {
response.sendFile(path.join(__dirname, 'index.html'));
console.log(request);
});

server.listen(5000, function() {
console.log('Starting server on port 5000');
});


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

console.log("new connection");

//---------------------------------------------------
socket.on("disconnect", (reason) => {
/* for (const room of socket.rooms) {
if (room !== socket.id) {
socket.to(room).emit("user has left", socket.id);
console.log(`user left ${room}`);
}
} */
console.log("user left");
});
});
</code></pre>
 

Latest posts

Top