Socket io chatapp

I am making a chat app and i get this error: ReferenceError: io is not defined. I need help. This is my code:

html:

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet", href="style.css">

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

<script src="index.js"></script>

<title>HMMMMMMM's Chat App</title>
<nav>

    <img class=" logo" src="logo.png" alt="Logo of phone with purple background">

</nav>

<div class="container">

    <div class="message right">Aditya: Hello.</div>

    <div class="message left">Shaan: Hi.</div>

    <div class="message right">Aditya: How are you?</div>

    <div class="message left">Shaan: I am fine.</div>

    <div class="message left">Shaan: How are you?</div>

    <div class="message right">Aditya: I am fine.</div>

    <div class="message left">Shaan: Ok.</div>

    <div class="message right">Aditya: Please choose something else to say after I say something!</div>

</div>

<div class="send">

    <form action="#" id="send-container">

        <input type="text" name="messageInp" id="messageInp"> 

        <button class="btn" type="submit">Send</button>

    </form>

</div>

css:

.logo{

display: block;

margin: auto;

height: 100px;

width: 100px;

}

body{

background-color: black;

color: white;

}

.container{

max-width: 955px;

border: thin solid white;

margin: auto;

height: 60vh;

/* background-color: white; */

overflow-y: auto;

}

.left{

text-align: left;

padding-left: 10px;

}

.right{

text-align: right;

padding-top: 10px;

padding-right: 10px;

}

#send-container{

display: block;

margin: auto;

text-align: center;

max-width: 985px;

width:100%

}

#messageInp{

width: 92%;

border: 2px solid black;

border-radius: 6px;

height: 34px;

}

.btn{

cursor: pointer;

border:2px solid black;

border-radius: 6px;

height: 34px;

}

main.js:

const io = require(‘socket.io’)(1234)

const users = {};

io.on(‘connection’, socket=>{

socket.on('new-user-joined', name=>{

    console.log(name)

    users[socket.id] = name;

    socket.broadcast.emit("user-joined", name);

})

socket.on('receive-message', message =>{

    socket.broadcast.emit("receive", {message: message, name: user[socket.id]})

})

})

index.js

const socket = io(“http://localhost:1234”)

const form = document.getElementById(‘send-container’);

const messageInput = document.getElementById(“messageInp”)

const messagecontainer = document.getElementById(".container")

const name = prompt(“Enter your name to join”);

// console.log(name)

socket.emit(‘new-user-joined’, name)

package.json

{

“name”: “nodeserver”,

“version”: “1.3.5”,

“description”: “MAde my ajx myster”,

“main”: “index.js”,

“scripts”: {

"test": "echo \"Error: no test specified\" && exit 1"

},

“author”: “”,

“license”: “ISC”,

“dependencies”: {

"socket.io": "^4.1.2"

}

}

package-lock.json

{

“name”: “nodeserver”,

“version”: “1.3.5”,

“lockfileVersion”: 1,

“requires”: true,

“dependencies”: {

"@types/component-emitter": {

  "version": "1.2.10",

  "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",

  "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg=="

},

"@types/cookie": {

  "version": "0.4.0",

  "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz",

  "integrity": "sha512-y7mImlc/rNkvCRmg8gC3/lj87S7pTUIJ6QGjwHR9WQJcFs+ZMTOaoPrkdFA/YdbuqVEmEbb5RdhVxMkAcgOnpg=="

},

"@types/cors": {

  "version": "2.8.10",

  "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.10.tgz",

  "integrity": "sha512-C7srjHiVG3Ey1nR6d511dtDkCEjxuN9W1HWAEjGq8kpcwmNM6JJkpC0xvabM7BXTG2wDq8Eu33iH9aQKa7IvLQ=="

},

"@types/node": {

  "version": "15.6.2",

  "resolved": "https://registry.npmjs.org/@types/node/-/node-15.6.2.tgz",

  "integrity": "sha512-dxcOx8801kMo3KlU+C+/ctWrzREAH7YvoF3aoVpRdqgs+Kf7flp+PJDN/EX5bME3suDUZHsxes9hpvBmzYlWbA=="

},

"accepts": {

  "version": "1.3.7",

  "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",

  "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",

  "requires": {

    "mime-types": "~2.1.24",

    "negotiator": "0.6.2"

  }

},

"base64-arraybuffer": {

  "version": "0.1.4",

  "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",

  "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="

},

"base64id": {

  "version": "2.0.0",

  "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",

  "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="

},

"component-emitter": {

  "version": "1.3.0",

  "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",

  "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="

},

"cookie": {

  "version": "0.4.1",

  "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",

  "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="

},

"cors": {

  "version": "2.8.5",

  "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",

  "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",

  "requires": {

    "object-assign": "^4",

    "vary": "^1"

  }

},

"debug": {

  "version": "4.3.1",

  "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",

  "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",

  "requires": {

    "ms": "2.1.2"

  }

},

"engine.io": {

  "version": "5.1.1",

  "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-5.1.1.tgz",

  "integrity": "sha512-aMWot7H5aC8L4/T8qMYbLdvKlZOdJTH54FxfdFunTGvhMx1BHkJOntWArsVfgAZVwAO9LC2sryPWRcEeUzCe5w==",

  "requires": {

    "accepts": "~1.3.4",

    "base64id": "2.0.0",

    "cookie": "~0.4.1",

    "cors": "~2.8.5",

    "debug": "~4.3.1",

    "engine.io-parser": "~4.0.0",

    "ws": "~7.4.2"

  }

},

"engine.io-parser": {

  "version": "4.0.2",

  "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz",

  "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==",

  "requires": {

    "base64-arraybuffer": "0.1.4"

  }

},

"mime-db": {

  "version": "1.48.0",

  "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",

  "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ=="

},

"mime-types": {

  "version": "2.1.31",

  "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",

  "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",

  "requires": {

    "mime-db": "1.48.0"

  }

},

"ms": {

  "version": "2.1.2",

  "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

  "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="

},

"negotiator": {

  "version": "0.6.2",

  "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",

  "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="

},

"object-assign": {

  "version": "4.1.1",

  "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

  "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="

},

"socket.io": {

  "version": "4.1.2",

  "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.1.2.tgz",

  "integrity": "sha512-xK0SD1C7hFrh9+bYoYCdVt+ncixkSLKtNLCax5aEy1o3r5PaO5yQhVb97exIe67cE7lAK+EpyMytXWTWmyZY8w==",

  "requires": {

    "@types/cookie": "^0.4.0",

    "@types/cors": "^2.8.8",

    "@types/node": ">=10.0.0",

    "accepts": "~1.3.4",

    "base64id": "~2.0.0",

    "debug": "~4.3.1",

    "engine.io": "~5.1.0",

    "socket.io-adapter": "~2.3.0",

    "socket.io-parser": "~4.0.3"

  }

},

"socket.io-adapter": {

  "version": "2.3.1",

  "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.3.1.tgz",

  "integrity": "sha512-8cVkRxI8Nt2wadkY6u60Y4rpW3ejA1rxgcK2JuyIhmF+RMNpTy1QRtkHIDUOf3B4HlQwakMsWbKftMv/71VMmw=="

},

"socket.io-parser": {

  "version": "4.0.4",

  "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",

  "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",

  "requires": {

    "@types/component-emitter": "^1.2.10",

    "component-emitter": "~1.3.0",

    "debug": "~4.3.1"

  }

},

"vary": {

  "version": "1.1.2",

  "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

  "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="

},

"ws": {

  "version": "7.4.6",

  "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",

  "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="

}

}

}

I am working on vscode. I know the error is in the index but the rest will help you run it. All help is appreciated.

Hi,

It looks like in your main.js you import socket.io using require, but in index.js you don’t. So when you try to use io in index.js, it doesn’t exist.

Where do these files run; what kind of project is this? If index.js runs in the browser, you’ll need to add a <script> tag to download socket.io I think.

the second part is done. I will try out the first part

I got another error module socket.io is not defined