Unable to establish a socket connection

Question

I am trying to follow this tutorial for setting up a simple WebSocket between client and server in JavaScript. I am up to the part where the author writes

At this point, if we refresh our webpage we can see the “Made socket connection“ and a weird combination of letters and numbers which represents socket.id (a unique socket) in our terminal.

However, this is not the case for me. I get the 'Listening on port 8080' message, but not the socket connection message. In the Chrome DevTools, I can see that my client HTML page is failing to find the chat.js script (see images below), but I haven't got the requisite knowledge to be able to diagnose further than that:

The article is quite old in software engineering terms, so I wonder if maybe the way some of this stuff works has changed? I believe I have done everything more or less exactly as described, although it is possible that I've missed something. My folder structure is as follows:

And my code is as follows:

chat.js:

const socket = io(window.location.origin);

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta>
        <title>WebSocket Tutorial</title>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.js" integrity="sha512-oFOCo2/3DtjrJG4N27BjSLQWoiBv171sK6a+JiWjp/7agxC2nCUP358AqzxkBUb5jX8g6CYLPdSKQTbC0weCwA==" crossorigin="anonymous"></script>          
    </head>

    <body>
        <h1>Hello, World!</h1>
        <!--Load Socket.io in Client-->
        <script src=“/chat.js”></script>
    </body>
</html>

index.js:

// Server Setup

const express = require('express');
const socket = require("socket.io");
const app = express();

// Serve public folder to client 

app.use(express.static("public"));

const server = app.listen(8080, function() {
    console.log("Listening on Port: 8080");
});

// Run the socket on the server

const io = socket(server);

// Specify what to do on connection 

io.on('connection', (socket) => {
    console.log("Socket connected: ", socket.id);
});

Any help would be much appreciated! I've googled around a bit, and looked at people in similar situations on SO (e.g. this person), but haven't yet found a solution. Hopefully someone here can help.

Thanks!

score 1 · Accepted Answer · answered Feb 05 '21 at 20:41

Your are not loading your chat.js script correctly because you are using the wrong quotes (“” instead of ""). This is probably because you copied the tag from the tutorial.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta>
  <title>WebSocket Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.js" integrity="sha512-oFOCo2/3DtjrJG4N27BjSLQWoiBv171sK6a+JiWjp/7agxC2nCUP358AqzxkBUb5jX8g6CYLPdSKQTbC0weCwA==" crossorigin="anonymous"></script>
</head>

<body>
  <h1>Hello, World!</h1>
  <!-- wrong quotes -->
  <script src=“/chat.js”></script>

  <!-- right quotes -->
  <script src="/chat.js"></script>

</body>

</html>

Unable to establish a socket connection

1 Answers1