How can you move away from using the url:port scheme with socket.io?

Recently, I've been delving into node.js and socket.io, but I'm struggling to eliminate the need to type "url:port" in the browser. Instead, I want users to simply enter the URL and have everything load up, similar to my work-in-progress single player game located here: (yes, I aim to make it multiplayer). However, I don't want the game to run on port 80/443 as those are reserved for the web server.

I desire a setup like this one: without having to include "ip/url:port". How can I achieve this?

Here's my app.js code:

// Setting up Socket.IO
var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs');

// Running the server on port 9000
app.listen(9000);

// Sending index.html to the player
function handler(req, res) {
  fs.readFile(__dirname + '/index.html',
    function(err, data) {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }

      res.writeHead(200);
      res.end(data);
    });
}

// Connection listener
io.sockets.on('connection', function(client) {
  console.log('New connection established.');
});

Here's the index.html content:

<html>
<head>
<meta charset="utf-8">
<title>Multiplayer Blocks</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<canvas id="canvas" style="background: #000000;">
<script>

// Socket.IO
var socket = io.connect('http://localhost:9000');

</script>
</body>
</html>

UPDATE: Ideally, I want the game to operate on Port 9000, while the index.html is accessible through a standard/portless URL like sub.domain.com/game/ instead of URL:Port.

UPDATE 2: I've condensed my question into just one inquiry as I realized my two issues are distinct.

UPDATE 3: Problem solved! I managed to figure it out myself, and it's surprisingly straightforward:

Here's the new simplified server code:

var io = require('socket.io').listen(9000);

// Connection listener
io.sockets.on('connection', function(client) {
  console.log('Connection established.');
});

And here's the updated index.html (accessible via file://folder/index.html):

<html>
<head>
<meta charset="utf-8">
<title>Multiplayer Blocks</title>
<script src="http://localhost:9000/socket.io/socket.io.js"></script>
</head>
<body>
<canvas id="canvas" style="background: #000000;">
<script>

// Socket.IO
var socket = io.connect('http://localhost:9000');

</script>
</body>
</html>

Big thanks to everyone who offered assistance. It seems that Apache now serves the files as usual, while socket.io listens on port 9000 and connects the index.html (or any other file) to the server — meaning this file can be placed anywhere, even on another server or locally. Perfect solution! :))

Answer №1

Opt for the standard HTTP/HTTPS ports 80/443 (commonly used for WS/WSS protocols as well).

If necessary, don't hesitate to reroute them to different, "internal" ports.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Traversing JSON data structures regardless of missing keys

Here is a JSON containing some data: { "results":[ { "name":"Sydney Showboats", "photos":[ { "photo_reference":"Pic062" } ] }, ...

What is the solution for fixing the CORS Error that arises during a URL Redirection?

I am currently working on setting up Google Authorization for my mobile app. The frontend is built using React Native, while the backend is powered by NodeJS with Express. While I have managed to successfully make API calls from my frontend using Axios, I ...

CORS not functioning with Spotify's Web API

I'm currently developing an Express application that utilizes the Spotify Web API, with ejs serving as my view engine. On one of my ejs pages, there is a button that triggers a call to an endpoint in my Express server. This endpoint then performs mult ...

Calculating the time difference between two dates in the format yyyy-MM-ddTHH:mm:ss.fffffff can be done by following these steps

Can someone help me figure out how to calculate the difference in days between the date and time 2021-02-23T08:31:37.1410141 (in the format yyyy-MM-ddTHH:mm:ss.fffffff) obtained from a server as a string, and the current date-time in an Angular application ...

Is there a method to uncover the code that controls the display of a <div> element?

As a fresh face at the company, I've been given the responsibility of developing a chart that is similar to one already present on their website. While I have the knowledge and skills to create it, I am struggling to locate the specific code where the ...

organizing the div based on the given data

I'm working on developing a web application using HTML and AngularJS. There are two main div elements: Div 1 <div class="box1" style="margin-top:20px;"> <span ng-repeat="i in data" style="font-size:14px; font-weight:normal">{{i.div ...

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

Update the input field's placeholder with the current date

Is it possible to dynamically set the placeholders for <input type='date' placeholder='{{ 'currentDate' }}'>? I have tried using the following variable: currentDate = this.datePipe.transform(new Date(), "yyyy-MM-dd& ...

Which specific html container or element can be found on the mymsn pages?

When accessing mymsn, users have the ability to personalize the content and layout of their webpage. I am curious about what type of container is being utilized for this customization - does it involve an html element, or perhaps javascript, or something e ...

Could the conflicting interaction between CSS transformation and animation be resolved by adjusting the order of the HTML elements

Hey there! I'm facing an interesting challenge with my menu design. The menu has rounded ends and diagonal spaces created using CSS transform skewx. Additionally, I have an animated element on the page. The issue arises when the animated element is p ...

"Troubleshooting Azure Function dependencies: Dealing with an Invalid ELF

I am facing an issue while trying to execute an Azure Function that has a dependency on TensorflowJS, resulting in an invalid ELF header error. It appears that the dependency has been built for a different architecture than the one I am using locally; OSX ...

Empty screen appears when "npm run serve" command is executed following the build process

I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve. I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank ...

Is there a way to verify whether a user is currently logged in? (Using everyauth in node.js)

Previously, I relied on client-side auth for my application. Recently, I integrated server-side everyauth and it's functioning well. However, I'm unsure how to perform a function similar to FB.getLoginStatus (which I used in the client-side) when ...

Firebug mistakenly detects phantom errors

<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...

Introducing Row Offset Enhancement

I am working on a code to create a custom "table" because I require some more intricate features that a regular table cannot provide. <div class="container"> <cfloop index="x" from="1" to="5"> ...

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

I would like to know how to create a dropdown menu that shows the country name, flag, and code based on the

I have successfully generated the telephone input field. One requirement is to display the Country flag along with the country name as soon as the dropdown is selected. Another requirement is that once the country is selected, it should display the countr ...

Unsure if values can be imported from one component to another in Vue.js using props

Currently experimenting with Vue and ran into a minor challenge - wondering if there's a solution to this. I am looking to add a new value to my items array using my Button component so that I can display it using v-for. While consolidating everything ...

Guide: Installing grpc-tools JavaScript package on Ubuntu 18.04 using npm

Can someone help me figure out how to install the grpc-tools package on ubuntu 18.04 using npm? I'm encountering an error, while it works fine on ubuntu 20.04. Any suggestions on how to successfully install it on ubuntu 18.04? This is the content of ...

Is it possible to extract information from a URL, search for that data in a database, and display it in an ejs file?

As a newcomer to nodejs and express, I am wondering if there is a way to extract data from a URL, search for it in the database, and then display the entire collection in an ejs file. For example (/category/:animal) Here, the variable (animal) will be se ...