socket.io not defined and rejecting the connection

https://i.sstatic.net/B4bqV.pnghttps://i.sstatic.net/QfJqv.pngMy current code utilizes socket.io to display a message. However, when I execute node server.js, none of the output messages are being logged to the console. Below are snippets of my chat.html, server.js, and main.js files that contain the socket.io code.

chat.html

<script src="http://localhost:54159/socket.io/socket.io.js"></script>
    <script src="js/main.js"></script>

server.js

const http = require('http'); 
const express = require('express');
const socketio = require('socket.io'); 

const app = express();
const server = http.createServer(app); 
const io = socketio(server); 

app.use(express.static(path.join(__dirname, 'public')));

io.on('connection', (socket) => {
    
    console.log('New web socket connection...'); 
    socket.emit('message', 'Welcome to Chat Room!');
    
}); 


const PORT = 54159 || process.env.PORT; 

server.listen(PORT, () => console.log(`Server running on port ${PORT}`)); 

main.js const socket = io();

Answer №1

Alright, let me summarize the changes recommended in our conversation:

Replace this:

<script src="http://localhost:54159/socket.io/socket.io.js"></script>

with this:

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

This update eliminates the need to specify the port, which was incorrect to begin with.


Update:

/public/chat.html

to:

/chat.html

to align with the path specified in your express.static() configuration. To access /public/chat.html, the file would have to be in public/public/chat.html on your server's file system, which I assume is not the case, and it's likely in public/chat.html. Your express.static() directive points to the public directory as the root, so all other paths in the URL are relative to that.


Furthermore, remember to restart your server whenever you make changes to either the client or server code to ensure that all recent updates are applied.


If you're uncertain about the port your server is running on, check the console output when your server starts up:

console.log(`Server running on port ${PORT}`)

This will indicate the port it's operating on. The reference to brackets in the log likely pertains to the nodejs debugger, which operates on a distinct port from your web server.

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

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Currently, I am working on a project using AngularJS along with angular.less. To centralize all my constants, I have stored them in one .less file and imported it at the beginning of all my other less files using a relative path: @import "constants" Even ...

Pointer-enhanced Material UI Popup

Is there a way to implement a Popup that looks like the image provided using @Material-ui? https://material-ui.com/ I attempted to use Popover, however Popper does not include a pointer like in the image. https://i.stack.imgur.com/atz0G.png ...

Adding text values to an HTML form action

I am working on a form that includes a text input field and a submit button. Is there a way for me to add the value of the text box to the form action URL? For example, can I dynamically change the action attribute to something like: action="https://www. ...

Turning off CSS on a Wordpress page

I need some assistance with WordPress and CSS. By default, WordPress applies CSS to all posts and pages. However, I want to disable specific CSS styles for certain objects on the page. For example: When I insert a table, it automatically inherits the CSS ...

Harnessing the power of helper classes effortlessly within expressjs

I've been working on a basic expressjs application and I'm hoping to incorporate a new library or helper to organize some of my code. My goal is for this library to function as a module, but unfortunately, I'm encountering difficulties in ge ...

A guide to implementing offline.js or online.js alongside a submit button

I am looking for a way to check network connection only when the user presses the SUBMIT button, without constantly monitoring for internet connectivity. After researching websites and Stack Overflow questions for weeks, I have not found a satisfactory sol ...

I am looking to incorporate a dropdown feature using Javascript into the web page of my Django project

According to the data type of the selected column in the first dropdown, the values displayed in the columns of the second dropdown should match those listed in the JavaScript dictionary below, please note: {{col.1}} provides details on the SQL column data ...

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

Tips for optimizing the page speed of your Pixi JS app by ensuring it runs efficiently after the page loads

On my website, I implemented a dynamic gradient animation with shape-changing blobs using pixi js. The animation functions flawlessly, but the issue arises when I run page speed tests - the test assumes that the page has not finished rendering because the ...

passport.use results in a rejected request

Please refer to the following code for more details: app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(express.static(__dirname + '/public')); app.use(passport.initialize()); app.use(passport.session()); / ...

Enhance your HTML page functionality with the power of jQuery

I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...

decorating elements in a line with colored backgrounds

I am facing an issue where I want to keep three divs aligned horizontally on the same line, but their background colors are causing them to not align properly. Adding margin or padding causes the divs to wrap up instead of staying in line. #service_cont ...

node.js zombie.js encountering numerous browser glitches

Attempting to log in to a web application and initiate a simulation involves visiting certain pages and modifying values. The code snippet for this task is as follows: var Browser = require("zombie"); fail = function (error) {console.log(error)} funct ...

The drop-down does not move above the subsequent div when focused

I have implemented a dropdown feature on focus of an <input type='text'> box in the following manner http://jsfiddle.net/Newtt/7ffdF/ The issue I am facing is with the positioning of the dropdown box. It currently displaces the content of ...

Chrome is having trouble loading basic JavaScript

Here's the JavaScript code I have placed inside the head tag of my HTML: <script type="text/javascript"> function over1() { var img1 = document.getElementById("1").src; document.getElementById("big").src = img1; } function out() { ...

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

Guide to setting up a nodejs server for automating tasks with cron jobs on a fixed schedule

I am in need of developing a nodejs "server" that will not serve any assets or content, but rather will be responsible for running scheduled tasks to retrieve data from one database and update another database. The schedule of these tasks should be customi ...

What is the best way to cut out a portion of a div using CSS?

I have a scaled down version of my project, but it's not quite what I need. I would like the green div to have some transparency so that the content behind both divs is visible (there is none in the example, but there is in my actual project). However ...

What is the best way to adjust the background color of Material UI's theme based on different screen sizes?

Having trouble replacing hard-coded CSS breakpoints with Material UI theme settings. @media screen and (min-width: 0px) and (max-width: 400px) { body { background-color: red; } } @media screen and (min-width: 401px) and (max-width: 599px) { body { ...

Verify whether an accordion is in the open or closed position

I am trying to determine if an accordion item is currently open or closed in Framework7. Can anyone provide guidance on how this can be accomplished? To open an accordion item, I have been using the following code: myApp.accordionOpen(".accordion-item"); ...