I've created a chat app using socket.io and nodejs and I hosted it on Netlify, but after hosting it on Netlify, it is working on my device and it is not working in other devices.Can someone help me with this?
NOTE: There is no DB integration.
1. HTML 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>iChat App</title>
<script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
<script defer src="js/client.js"></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section class="msger">
<header class="msger-header">
<div class="msger-header-title">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
class="bi bi-chat-heart" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.965 12.695a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2Zm-.8 3.108.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125ZM8 5.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z" />
</svg>
iChat App
</div>
<div class="msger-header-options">
<span><i class="fas fa-cog"></i></span>
</div>
</header>
<main class="msger-chat">
<div class="msg left-msg">
</div>
</div>
<div class="msg center-msg">
</div>
<div class="msg right-msg">
</div>
</main>
<form class="msger-inputarea" id="send-container" onsubmit="return false">
<input type="text" class="msger-input" placeholder="Enter your message..." id="messageInp">
<button type="submit" class="msger-send-btn">Send</button>
</form>
<!-- <form action="#" id="send-container">
<input type="text" name="messageInp" id="messageInp">
<button class="btn" type="submit">Send</button>
</form> -->
</section># #
</body>
</html>`
2. index.js file
`const express = require('express');
const serverless = require('serverless-http');
const { Server } = require('socket.io');
const app = express();
const server = app.listen(8000);
const io = new Server(server, { cors: { origin: '*' } });
const users = {};
io.on('connection', socket => {
// If any new user joins, let other users connected to the server know!
socket.on('new-user-joined', name => {
users[socket.id] = name;
socket.broadcast.emit('user-joined', name);
});
// If someone sends a message, broadcast it to other people!
socket.on('send', message => {
socket.broadcast.emit('receive', { message: message, name: users[socket.id]});
});
// If someone sends a message, let others know!
socket.on('disconnect', message => {
socket.broadcast.emit('left', users[socket.id]);
delete users[socket.id];
});
});
module.exports.handler = serverless(app);`
3. Client.js code(to connect server with client):
`const socket = io('http://localhost:8000');
// Get DOM elements to respective JS variables.
const form = document.getElementById('send-container');
const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector('.msger-chat');
// Audio that will play on receving message.
var audio = new Audio('ting.mp3');
//Function which will append event info to the container.
const append = (message, position) => {
const messageElement = document.createElement('div');
// messageElement.innerText = message;
messageElement.classList.add('msg');
messageElement.classList.add(position);
const msgBubble = document.createElement('div');
messageElement.appendChild(msgBubble);
msgBubble.classList.add('msg-bubble');
// const msgImg = document.createElement('div');
// messageElement.appendChild(msgImg);
// msgImg.classList.add('msg-img');
const msgInfo = document.createElement('div');
messageElement.appendChild(msgInfo);
msgInfo.classList.add('msg-info');
const msgInfoName = document.createElement('div');
messageElement.appendChild(msgInfoName);
msgInfoName.classList.add('msg-info-name');
const msgInfoTime = document.createElement('div');
messageElement.appendChild(msgInfoTime);
msgInfoTime.classList.add('msg-info-time');
const msgText = document.createElement('div');
msgBubble.appendChild(msgText);
msgBubble.innerText = message;
msgText.classList.add('msg-text');
messageContainer.append(messageElement);
if(position == 'msg-text'){
audio.play();
}
}
// Ask new user for his/her name and let the server know.
const name = prompt('Enter your name to join');
socket.emit('new-user-joined', name);
// If new user joins, recieve his/her name from the server know.
socket.on('user-joined', name => {
append(`${name} joined the chat`, 'center-msg')
});
// If server sends a message, receive it.
socket.on('receive', data => {
append(`${data.name}: ${data.message}`, 'msg-text')
});
// If a user leaves the chat, append the info to the container.
socket.on('left', name => {
append(`${name} left the chat!`, 'center-msg')
});
// If the form gets submitted, send server the message.
form.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
append(`You: ${message}`, 'right-msg');
socket.emit('send', message);
messageInput.value = '';
});`
I want to make this work in other devices also.
Related
A webpage created to fetch data from an api with a simple search bar and search button.
This is the HTML file:
<!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>Search Games</title>
<link rel="stylesheet" href="pbl.css">
</head>
<body>
<br><h1 class="heading1">Gamer's DataBase</h1>
<br>
<br>
<br>
<div>
<input class="search" type="search" placeholder="Search Game(s) by name..." id = "game_name">
<button class="searchbtn" onclick = "movie_search();event.preventDefault()"><svg width="30" height="30" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg></button>
</div>
<div class = "games"></div>
<script src = "game(with css).js"></script>
</body>
</html>
This is the JavaScript:
function movie_search()
{
var game_name = document.getElementById('game_name').value;
var raw = "search \""+game_name+"\"\;\r\nfields cover.url, name, url, screenshots.*; \r\n";
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://cors-anywhere.herokuapp.com/https://api.igdb.com/v4/games", requestOptions)
.then(response => response.json())
.then(data => {
data.forEach(gayme => {
html += "<div class = 'gayme'>"
let keys = Object.keys(gayme);
keys.forEach((key) => {
html += gayme[key]
})
html += "</div>"
const game = `<ul><li><img src = "https:${gayme.cover.url}"><br><h4>Name:</h4><h3>${gayme.name}</h3><br>Click for Game Info<br><br></li></ul>`;
document.querySelector('.games').innerHTML += game;
})
})
.catch(error => console.log('error', error));
}
document.querySelector(".search").addEventListener("keyup",function(event){
if(event.key == "Enter") {
movie_search ();
}
})
When I search something for the second time, the new resutls list below the previous results.
I want to add something to the code which will remove the previous results when the button is clicked and will display the new results only.
Please help.
Before you append the query results you have to clear the html of the search results:
document.querySelector('.games').innerHTML = "";
For your quesiton,you just need to remove + when assign new value to elements game
So change
document.querySelector('.games').innerHTML += game;
to
document.querySelector('.games').innerHTML = game;
Note: according to your code,variable html seems not used
html += "<div class = 'gayme'>"
let keys = Object.keys(gayme);
keys.forEach((key) => {
html += gayme[key]
})
html += "</div>" // this variable is not used later
const game = `<ul><li><img src = "https:${gayme.cover.url}"><br><h4>Name:</h4><h3>${gayme.name}</h3><br>Click for Game Info<br><br></li></ul>`;
document.querySelector('.games').innerHTML += game;
I am new to node js and js, My code is not able to cross the SQL statement
here is my app.js snippet for the SQL statement
my app.js
//declaration
const bodyParser = require("body-parser")
const fs = require('fs')
const express = require('express')
const app = express()
var session = require('express-session');
const path = require('path')
app.use("/static", express.static('./static/'));
//For the body parser
app.use(bodyParser.urlencoded({extended: false}))
//parse the application Json
app.use(bodyParser.json())
// for the MySQL page
var mysql = require('mysql')
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'login'
})
app.get ('/todo',(req,res)=>{
res.writeHead(200,{'content-type' : 'text/html'})
fs.createReadStream('project1.html').pipe(res)
})
app.listen(process.env.PORT || 3000)
my todo.js
document.addEventListener('submit',myFunction)
function myFunction(e){
console.log("in the data post method")
let sql = 'INSERT INTO `acc` (`name`) VALUES (?)'
connection.query(sql,req.body.name,(error,result)=>{
if(error) throw error
console.log('value inserted')
connection.end();
})
e.preventDefault();
var text = document.querySelector("input").value;
var text = document.querySelector("input").value;
var node = document.createElement("p");
node.id="li1"
if (text!=""){
var textnode=document.createTextNode(text);
node.appendChild(textnode); //append the value to LI
text = document.getElementById("demo")
console.log(text) ;
document.getElementById("demo").appendChild(node); //append the value to UI
document.querySelector("input").value = ""
}
// document.getElementById("demo").addEventListener('mouseover',myFunction1)
str = document.getElementById("li1")
console.log(str)
}
//SELECTING AN ELEMENT THAT WAS CREATAED DYNAMICALLY AND APPLLY SOME PROPERTY
$(document).on('click','p',function(){
$(this).css({"text-decoration": "line-through",color : "pink" });
$(this).fadeOut(1500);
// $(this).remove();
})
my project1.html
<!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>Create a table</title>
<script src="./static/todo.js"></script>
</head>
<body>
<h1>ToDo</h1>
<form id="form" action="/data" method="post">
<input type="text" name = "name" class="input" id="tt">
</form>
<div id= "lip">
<ul id="demo" id="demo">
</ul>
</div>
</body>
</html>
I want to insert the user typed value in the database as well as I have to list them in the front end, both codes work separately but when I combine them, after executing the SQL statement the browser waits for something
Please help me.
I'm following a tutorial about making a rock paper sissors game with a chat using socket.io and express. I'm only making the chat.
But I'm getting an error that the person in the tutorial isn't getting. I don't know how to fix it. I've search google but could only find very complicated solutions.
The error that I get when I try to send a message is 'ERR_CONNECTION_REFUSED'.
Here is my code:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<div id="chatWrapper">
<ul id="chatUl"></ul>
</div>
<div class="buttons">
<form id="chatForm">
<input id="chat"/>
<button id="verstuur">Verstuur</button>
</form>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script>
</body>
</html>
Server.js
const http = require('http');
const express = require('express');
const socketio = require('socket.io');
const app = express();
const clientPath = `${__dirname}/../client`;
console.log(`Static van ${clientPath}`);
app.use(express.static(clientPath));
const server = http.createServer(app);
const io = socketio(server);
io.on('connection', (sock) => {
console.log("Iemand is verbonden");
sock.emit('message', "Hoi, je bent verbonden!");
sock.on('message', () => {
io.emit('message', text);
});
});
server.on('error', (err) => {
console.error("Server fout: " + err);
});
server.listen(8080, () => {
console.log('Chat opgestard op 8080');
});
Client.js
const writeEvent = (text) => {
// <ul> element
const parent = document.querySelector('#chatUl');
// <li> element
const el = document.createElement('li');
el.innerHTML = text;
parent.appendChild(el);
};
const onFormSubmitted = (e) => {
e.preventDefault();
const input = document.querySelector('#chat');
const text = input.value;
input.value = '';
sock.emit('message', text);
};
writeEvent('Welkom bij de chat!');
const sock = io();
sock.on('message', writeEvent);
document
.querySelector('#chatForm')
.addEventListener('submit', onFormSubmitted);
Any help?
ps. The tutorial that I am following: https://www.youtube.com/watch?reload=9&v=xVcVbCLmKew
And sorry for bad English
You just forgot the formal parameter of a function (server.js):
io.on('connection', (sock) => {
console.log("Iemand is verbonden");
sock.emit('message', "Hoi, je bent verbonden!");
sock.on('message', (/* variable here*/ text) => {
io.emit('message', text);
});
});
Also check the path to your files. Is "${__dirname}/../client" correct?
I would like to create a website that can classify different types of cars. I have managed to get the website working to use the mobile net model, but I would like to use a custom model that I trained in google colab and then converted into javascript. Does anyone know how I could achieve this?
Here is the javascript code:
// Defining Variables
const webcamElement = document.getElementById('webcam');
let net;
var webcamrunning = false; // Flag, indicates if webcam-prediction is running or not
var bw = document.getElementById('butwebcam')
var bi = document.getElementById('butimage')
// App that predicts image
async function app() {
console.log('Loading mobilenet..');
const uploadJSONInput = document.getElementById('upload-json');
const model = await tf.loadLayersModel(tf.io.browserFiles([uploadJSONInput.files[0]]));
// Check if model loaded, if not, load it.
if (net == undefined)
{bi.innerHTML = 'Wait for Initiation...';
net = await model.load();
console.log('Sucessfully loaded model');
bi.innerHTML = 'Predict'}
else {console.log('Model already loaded')};
// Make a prediction through the model on our image.
const imgEl = document.getElementById('output');
const result = await net.classify(imgEl);
document.getElementById('console_pic').innerText =
`Prediction: ${result[0].className}
Probability: ${Math.round(result[0].probability*100)} %
`;
}
// Function that activates (starts webcam app) and deactivates the Webcam-Prediction
function start_webcam(){
if (webcamrunning == false)
{app_webcam();
}
else {webcamrunning = false;
bw.innerHTML = 'Activate Predicting';
};
};
// Setup Webcam
async function setupWebcam() {
return new Promise((resolve, reject) => {
const navigatorAny = navigator;
navigator.getUserMedia = navigator.getUserMedia ||
navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
navigatorAny.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true},
stream => {
webcamElement.srcObject = stream;
webcamElement.addEventListener('loadeddata', () => resolve(), false);
},
error => reject());
} else {
reject();
}
});
}
// Webcam application
async function app_webcam() {
console.log('Loading mobilenet..');
// Check if model loaded, if not, load it.
if (net == undefined)
{bw.innerHTML = 'Wait for Initiation...';
net = await mobilenet.load();
console.log('Sucessfully loaded model');}
else {console.log('Model already loaded')};
await setupWebcam();
webcamrunning =true;
bw.innerHTML = 'Stop Predicting';
while (webcamrunning) {
const result = await net.classify(webcamElement);
document.getElementById('console_vid').innerText =
`Prediction: ${result[0].className}
Probability: ${Math.round(result[0].probability*100)} %
`;
// Give some breathing room by waiting for the next animation frame to
// fire.
await tf.nextFrame();
}
}
;
Here is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='styles.css'/>
<input type="file" id="upload-json" src="C:\Users\USER\Desktop\ImageClassifier-master\model\model.json"/>
<!-- Load the latest version of TensorFlow.js -->
<script src="https://unpkg.com/#tensorflow/tfjs"></script>
<script src="https://unpkg.com/#tensorflow-models/mobilenet"></script>
<title> Image Classifier with MobileNet </title>
</head>
<body>
<img style='margin-top: -6px; z-index: 19;' id="header" height ="320">
<h1 style='margin-top: -35px'> What car is that?</h1>
<br>
<hr/>
<br>
<em> <strong> </strong> </em>
<br>
<br>
<hr/>
<br>
<h2> Upload your own Picture</h2>
<!-- Upload Function with File Preview -->
<input type="file" accept=".png, .jpg, .jpeg" height="200"
onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">
<!-- Predict button, calls predict function in Javascript -->
<button id="butimage" onclick="app()"> Predict! </button>
<!-- Window for Picture Preview -->
<div class = "window">
<span class="helper"></span>
<img class="center" id="output" alt="your image" src = "img/example.jpg" />
</div>
<div class = "result" id="console_pic">Result</div>
<br>
<hr/>
<br>
<br>
<br>
<br>
<script src="index.js"></script>
</body>
</html>
I am using Socket.io to create a multiplayer game. I have used a generated numerical code to dynamically create and join rooms.
My issue comes about emitting to specific rooms or even specific clients. I am unable to emit to a room (io.in(room).emit('event') or io.to(room).emit('event') They are synonyms). I am however able to socket.emit('event') between the server and client just fine. No errors. Simply nothing happens when I use anything but socket.emit(), io.emit(), and socket.on('',function(){ this.emit(); }).
The reason I have to emit to specific rooms is to update all clients in their rooms when a new client has joined. (I had tried emitting to each socket.id in each room but that does not work).
browser debugger tracking server emitted events
I have uploaded all the code I have used in my Node.js server in hopes that someone can see the error in my program. I am new to Socket.io and I am not sure about the validity of how I have set up my dynamic rooms.
The room event that does not work is: connectToRoom
Server
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req, res) {
res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
http.listen(3000, function(){
console.log('listening on localhost:3000');
});
io.on('connection', function(socket){
socket.id = Math.random();
SOCKET_LIST[socket.id]=socket;
socket.on('create',function(){
var thisGameId = ( Math.random() * 100000 ) | 0;
roomNo+=1;
roomArr[thisGameId]=thisGameId;
this.emit('createResponse', {gameId: thisGameId, mySocketId: socket.id});
this.join(thisGameId.toString());
});
socket.on('joinRoom',function(data){
//playerJoinGame(data);
//io.sockets.in(data.roomKey.toString()).emit('connectToRoom', "You are in room no. "+data.roomKey);
//socket.to(data.roomKey.toString()).emit('connectToRoom', "You are in room no. "+data.roomKey);
if( io.nsps['/'].adapter.rooms[data.roomKey]!== undefined ){
socket.join(data.roomKey.toString());
SOCKET_LIST[socket.id].username = data.username;
this.emit('joinRoomResponse',{
roomKey:data.roomKey
});
}
if(io.nsps['/'].adapter.rooms[data.roomKey]=== undefined){
this.emit('joinError',{
message: "This room does not exist."
});
}
});
socket.on('updateRoom',function(data){
var clients=io.sockets.adapter.rooms[data.roomKey].sockets;
var clientsArr=Object.keys(clients);
for (var clientId in clientsArr ) {
io.sockets.connected[clientsArr[clientId]].emit('connectToRoom', {
roomKey:data.roomKey,
username:data.username
});
}
io.sockets.in(data.roomKey).emit('connectToRoom', {
roomKey:data.roomKey,
username:data.username
});
});
socket.on('disconnect',function(){
delete SOCKET_LIST[socket.id];
});
});
Client
var socket = io();
var roomKey,username,mySocketId;
var optionDiv = document.getElementById('optionDiv');
var optionDivCreate = document.getElementById('optionDiv-create');
var optionDivJoin = document.getElementById('optionDiv-join');
var prepDiv = document.getElementById('prepDiv');
var createDiv = document.getElementById('create-Div');
var lobbyDiv = document.getElementById('lobbyDiv');
var createRoomKey = document.getElementById('create-roomKey');
var createPlayers = document.getElementById('create-players');
var joinForm = document.getElementById('join-form');
var joinForm_roomKey = document.getElementById('join-roomKey');
var joinForm_username = document.getElementById('join-username');
var joinForm_submit = document.getElementById('join-form-submit');
var gameDiv = document.getElementById("gameDiv");
optionDivCreate.onclick=function(){
socket.emit('create');
};
optionDivJoin.onclick=function(){
optionDiv.style.display='none';
prepDiv.style.display='inline-block';
joinForm.style.display='inline-block';
};
socket.on('createResponse',function(data){
roomKey = data.gameId;
mySocketId = data.mySocketId;
optionDiv.style.display='none';
prepDiv.style.display='inline-block';
createDiv.style.display='inline-block';
createRoomKey.innerHTML = roomKey;
});
joinForm_submit.onclick= function(){
};
joinForm.onsubmit = function(e){
e.preventDefault();
roomKey = joinForm_roomKey.value;
username = joinForm_username.value;
socket.emit('joinRoom',{
roomKey:roomKey,
username:username
});
joinForm_roomKey.value='';
joinForm_username.value='';
};
socket.on('joinRoomResponse',function(data){
optionDiv.style.display='none';
createDiv.style.display='none';
prepDiv.style.display='none';
lobbyDiv.style.display='inline-block';
socket.emit('updateRoom',{
roomKey:roomKey,
username:username
});
});
socket.on('connectToRoom',function(data){
socket.emit('debug');
//createPlayers.innerHTML = "<br />"+data.username;
alert("triggered");
});
socket.on('joinError',function(data){
alert(data.message);
});
HTML
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Prototype</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="optionDiv" style="">
<button id="optionDiv-create">Create Game</button><br />
<button id="optionDiv-join">Join Game</button>
</div>
<div id="prepDiv" style="display:none;">
<div id="create-Div" style="display:none;">
Room Key:<br />
<h1 id="create-roomKey"></h1>
<h1 id="create-players"></h1>
</div>
<form id="join-form" style="display:none;">
Username:<br />
<input id="join-username" type="text" style="width:500px"></input><br />
Room Key:<br />
<input id="join-roomKey" type="text" style="width:500px"></input><br />
<button id="join-form-submit">Join</button>
</form>
</div>
<div id="lobbyDiv" style="display:none;">
You are in room:<br />
<h1 id="join-roomKey"></h1><br />
Players in room:<br />
<h1 id="join-players"></h1>
</div>
<div id="gameDiv" style="display:none;">
<div id="gameDiv-canvas">
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;">
</canvas>
</div>
<div id="gameDiv-chat">
<div id="chat-text" style="width:500px;height:100px;overflow-y:scroll">
<div>
Hello!
</div>
</div>
<form id="chat-form">
<input id="chat-input" type="text" style="width:500px"></input>
</form>
</div>
</div>
<!--<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.2/socket.io.js"></script>-->
<script src="/socket.io/socket.io.js"></script>
<script src="/client/js/client.js"></script>
</body>
</html>
The correct syntax is the following:
io.to('some room').emit('some event');
I have resolved my issue. The issue in this program is the way that I have made my program. The program is coded in a "non-dynamic room" manner. I have coded the program to only handle one game instance. Not multiple game instances for each room.
It is due to the fact that I am using one "game" instance for all the rooms. All games in each room will be using the same codes. Because I am running separate unique game instances for each unique room, I also need to create unique code for each corresponding game instance. This program does not create unique codes for each corresponding game instance. Hence it does not work.
I have restructured the program in a modular manner to handle activities for each individual room.