CODEWITHSUNDEEP
javascripthtmlnode.jssocketswebsocket
Mick McCarthy
Mick McCarthy

Reputation: 439

Unable to establish a socket connection

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:

Console Network

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:

Folders

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!

Upvotes: 1

Views: 679

Answers (1)

axtck
axtck

Reputation: 3965

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>

Upvotes: 1

Related Questions