Unlocking the secrets to obtaining a socket.io client

I encountered an error when trying to set up a socket.io server and client. The error I received on the client side was:

Failed to load resource:http://localhost:3000/socket.io/?EIO=4&transport=polling&t=OK-egu3 the server responded with a status of 404 (Not Found)

Server.js code:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {cors: {origin: "*"}});
const path = require('path');

app.set('view engine', 'ejs');

app.use(express.json({extended: true, limit: '1mb'}));

io.on('connection', (socket) => {
 console.log("new connection " + socket);
});

app.get("/", (req, res, next) => {
 res.render('index'/*, { ioS : io }*/);
});

console.log("Ready");

app.listen(3000);

Index.ejs code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>socket Respons</h1>
</body>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js" integrity="sha384-/KNQL8Nu5gCHLqwqfQjA689Hhoqgi2S84SNUxC3roTe4EhJ9AfLkp8QiQcU8AMzI" crossorigin="anonymous"></script>
<script>
    //const io = ;
    const socket = io();
    console.log(socket);
</script>
</html>

The libraries I have installed are:

- socket.io - socket.io-client - express - ejs

Answer №1

Your client initialization is incomplete. The server is on localhost:3000, but the client is unaware of this because you have not specified where to connect.

If we refer to the official socketio documentation, it suggests providing the URL of the server's socket endpoint like so:

const URL = "http://localhost:3000";
const socket = io(URL, { autoConnect: false });

The error message stating "not found" may seem vague, but it does provide a clue for debugging purposes.

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

How should callbacks be established for communication between a React app and an iframe using postMessage?

I'm encountering an issue with my website's communication with a third-party iframe. The site has three methods - login, sign, and get information - all functioning in a similar manner. I embed the third-party iframe and send a message to it usin ...

Create a new JSON file to preserve the value of a JSON object

I am working with a JSON file that looks like this: { "soils": [{ "mukey": "658854", "mukeyName": "Meggett-Kenansville-Garcon-Eunola-Blanton-Bigbee (s1517)", "sl_source": "Fl soil map", "cokey": "3035468", "soilName": "Eunola", " ...

The Angular component fails to retrieve data from a subscribed service when the data is being fetched from the sessionStorage

Within my Angular application, there exists a service that handles incoming objects by adding them to a list of objects, then saving the updated array to sessionStorage. This service also sends the updated list to another application that is subscribed to ...

Exploring the World of Micro-Frontends with the Angular Framework

I am conducting research on the best methods for transitioning a large single-page application into a micro-frontend architecture. The concept: The page is made up of multiple components that function independently Each component is overseen by its own ...

The material-table is utilizing a component as data, but is failing to pass the component context during the onChange

I attempted to include a component as data in a material table, but I'm facing an issue with accessing the 'this' context of the component to update the state within the onChange function. Unfortunately, the editable feature offered by mater ...

Which is better for integrating Google Maps API - JavaScript or PHP?

Is it better to use JavaScript or PHP with the Google Maps API? What are the advantages and disadvantages of each? If I have geocodes stored in a database, should I retrieve them using Ajax and process them with JavaScript, or is PHP a better option? The ...

Error: Trying to use 'search' before it has been initialized causes a ReferenceError

Every time I run my code, I encounter this reference error but I can't figure out what's causing it. ReferenceError: Cannot access 'search' before initialization App C:/Users/GS66/Desktop/IN20/IFN666/week4/src/App.js:60 57 | 58 | expor ...

Having trouble customizing a particular view within Angular

I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared. Here is the relevant code: HTML (index.html): <div class="col-md-8 col-md-offset-2"> <div ng ...

Using MediaQuery from react-responsive to selectively hide individual JSX attributes

I have a button element that includes both the Profile Picture and the Info, which consists of the first name and last name. My goal is to hide only the profile picture (profileImageProps={profileImageAndBasicInfoProps.profileImageProps}) when the screen ...

What is the reason that the for loop updates all indexes in Node.js?

Currently, I am working on a space battle program that involves nested arrays. In order to simulate fleet fighting, I have written the following code: //Roll a dice function const randomNumber = (number) => { return Math.floor(Math.random() * numbe ...

listening for events on nested classes

I am looking to dynamically toggle the class "collapsed" on each element with the class "category" when it is clicked. The issue arises when these "category" elements are nested within each other, causing the child elements to also trigger the class change ...

Retrieve information using server-side rendering

I'm faced with a situation where my page utilizes query parameters to fetch data via SSR. The challenge arises when these query parameters frequently change, triggering a re-fetch of the data using SSR despite there being no client-side data fetching ...

What steps should I take to incorporate Google sign-in on my website and gather user information efficiently?

I am looking to add the Google sign-in button to my website. While I am knowledgeable in HTML, PHP and JavaScript are not my strong suits. My goal is to allow users to sign in with their Google account and securely store their information on my database th ...

Is it possible to transfer data from javascript to php through ajax?

I am attempting to extract the data speedMbps from my JavaScript code using Ajax to send the data to my PHP script, but unfortunately, I am not receiving any output. My experience with Ajax is limited to implementing auto-completion feature. <script sr ...

What are the steps to create a unique popup div effect with jQuery?

Upon clicking the icon on this page, a mysterious div appears with information. I'm completely baffled by how they achieved this cool effect using css/jQuery tools. Can anyone shed some light on the mechanism behind this? ...

Capturing groups in Javascript Regex not populating back-references correctly

Here's an interesting situation (or maybe not so uncommon): I'm trying to extract two specific capturing groups using JavaScript regex. The first group should consist of one or more digits (0-9), while the second group should consist of one or mo ...

There seems to be an issue with the DownloadDir functionality of the node-s3-client library, as

I am currently using a node s3 client library called 'node-s3-client' for syncing directories between S3 and my local server. As per the guidelines provided in the documentation, here is the code I have implemented: var s3 = require('s ...

The express request is no longer accessible through fileStream's 'close' event

Currently, I have a node.js implementation with express that utilizes a POST router. The essence of this implementation is to receive a list of files in the body of the post request, zip them, and then provide a link to download the resulting zip file. T ...

Code snippet for a click event in JavaScript or jQuery

I initially wrote the code in JavaScript, but if someone has a better solution in jQuery, I'm open to it. Here's the scenario: I have multiple questions with corresponding answers. I want to be able to click on a question and have its answer dis ...

Exploring the contrast between Vuex store WATCH and SUBSCRIBE

Can you explain the main distinction between watch and subscribe, and when it is most appropriate to use one over the other? According to information on the Vuex official documentation, both methods appear to be essentially identical in functionality and p ...