'net::ERR_SSL_PROTOCOL_ERROR after deployment to Netlify
My shoutbox project works just find when I run it on localhost, "npm start" for the "server.js" which and I use Live Server to open "client.js" in browser. In localhost everything runs smoothly, when server starts, I can open it in browser. API request are sent good an received data parsed, display and also saved to MongoDB.
But when I deployed it onto Netlify, the following looping errors appear in the console:
"Failed to load resource: the server responded with a status of 404 (Not Found)" "polling-xhr.js:202 GET https://shoutboxbymurad.netlify.app/socket.io/?EIO=4&transport=polling&t=O1xOrfM 404 (Not "
Client.js is:
// Variables:
const socket = io('localhost:3000'); //localhost:3000
const messages = document.getElementById('messages'); // Messages field
const msgForm = document.getElementById('msgForm'); // Message form
const msgInput = document.getElementById('msgInput'); // Message input field
const userNameInput = document.getElementById('username'); // Username input field
const usrsList = document.getElementById('users-list');
var userName = '';
var onlineUsers = [];
var clientIp = '';
var clientRegion = '';
// Functions:
socket.on('welcome-message', (msg) => {
const html = `<div style="font-weight: bold; color:rgb(53, 247, 111);">${msg}</div>`;
messages.innerHTML += html;
});
socket.on('message', (msg, usr) => {
appendMessage(msg, usr);
});
const appendMessage = (message, user) => {
handleURL(message, user);
};
const handleURL = (message, user) => {
message = message.split(' ');
for (let i = 0; i < message.length; i++) {
if (message[i].includes('http' || 'https')) {
message[i] =
`<a href="` + message[i] + `" target="_blank">${message[i]}</a>`;
}
}
message = message.join(' ');
const html = `<div style="font-weight: bold; text-transform: uppercase; color: black; font-size: 1rem">${user}:<span style='text-transform: none;'>${message}</span></div>`;
messages.innerHTML += html;
};
socket.on('get-messages', (data) => {
let arr = [];
let limitMessages = 9; // Number of messages new connect users will get (9 by default, change if want otherwise)
for (let i = 0; i < data.length; i++) {
arr.push(JSON.parse(data[i]));
}
if (arr.length > limitMessages) {
// if number of messages in array is more than 9, then get the last 9 messages
arr = arr.slice(arr.length - limitMessages);
}
arr.map((msg) => {
const html = `<li style="color:blue;font-weight:bold; font-size: 1rem">${msg.name}:<span style="color:blue">${msg.message}<span></li>`;
messages.innerHTML += html;
});
});
socket.on('get-online-users-list', (usersData) => {
appendToOnlineBox(usersData);
});
socket.on('update-online-users-list', (data) => {
// alert(data);
removeFromOnlineBox(data);
});
const removeFromOnlineBox = (data) => {
usrsList.innerHTML = '';
let arr = [];
for (let i = 0; i < data.length; i++) {
arr.push(JSON.parse(data[i]));
}
onlineUsers.length = 0;
for (let i = 0; i < arr.length; i++) {
if (!onlineUsers.includes(arr[i].name)) {
onlineUsers.push(arr[i].name, arr[i].ip, arr[i].clientRegion);
}
}
onlineUsers.map((user) => {
let onlineUser = `<li style="border: 4px solid blue; padding:0px; margin:0"><div style="border: 2px solid green; padding:0">${user}</div></li>`;
usrsList.innerHTML += onlineUser;
});
};
const appendToOnlineBox = (data) => {
usrsList.innerHTML = '';
let arr = [];
for (let i = 0; i < data.length; i++) {
arr.push(JSON.parse(data[i]));
}
for (let i = 0; i < arr.length; i++) {
if (!onlineUsers.includes(arr[i].name)) {
onlineUsers.push(arr[i].name, arr[i].ip, arr[i].clientRegion);
}
}
onlineUsers.map((user) => {
let onlineUser = `<li style="border: 4px solid blue; padding:0px; margin:0"><div style="border: 2px solid green; padding:0">${user}</div></li>`;
usrsList.innerHTML += onlineUser;
});
};
msgForm.addEventListener('submit', (e) => {
e.preventDefault();
socket.emit(
'chatmessage',
userName,
socket.id,
msgForm.msg.value,
clientIp,
clientRegion
);
msgForm.msg.value = '';
});
const checkUserName = () => {
msgInput.disabled = true;
userNameInput.addEventListener('change', () => {
if (userNameInput.value !== '') {
msgInput.disabled = false;
userNameInput.disabled = true;
userName = userNameInput.value;
}
});
};
// GET CLIENT INFO:
const getClientIpAndRegion = () => {
fetch('http://www.geoplugin.net/json.gp')
.then((res) => res.json())
.then((data) => {
clientIp = data.geoplugin_request;
clientRegion = data.geoplugin_countryName;
});
};
// Function calls:
checkUserName(); // Check if a user inserted a useraname
getClientIpAndRegion(); // Get clients' IP address and client Geolocation (region)
Server.js is:
const mongoose = require('mongoose'); // get mongoose
const mongoDB =
'....';
mongoose
.connect(mongoDB, {
useUnifiedTopology: true,
useNewUrlParser: true,
})
.then(() => {
console.log('Conncected to MongoDB...');
})
.catch((err) => {
console.log(err);
});
const UsrData = require('./Models/UserDataSchema');
var io = require('socket.io')(3000, {
cors: {
origin: '*',
},
});
var user = new Object(); // Socket client user object
var userData = []; // objects array to store information on connected user's name, socket.id and message : Array of object strings
var data; // variable to hold UserData Schema
io.on('connection', (socket) => {
socket.emit('welcome-message', 'WELCOME TO THE SHOUTBOX'); // Emit welcome message to new user
io.emit('get-online-users-list', userData); // Emit online users list to new user
socket.emit('get-messages', userData); // Emit all previous messages from users to new user
socket.on('disconnect', () => {
//handle user disconnect
let arr = [];
for (let i = 0; i < userData.length; i++) {
arr.push(JSON.parse(userData[i]));
}
arr = arr.filter((user) => user.socketId !== socket.id);
userData.length = 0;
for (let i = 0; i < arr.length; i++) {
userData.push(JSON.stringify(arr[i]));
}
io.emit('update-online-users-list', userData);
});
socket.on(
'chatmessage',
(username, socketid, formValue, clientIp, clientRegion) => {
if (username !== '' && formValue !== '') {
user.name = username;
user.socketId = socketid;
user.message = formValue;
user.ip = clientIp;
user.clientRegion = clientRegion;
io.emit('message', user.message, user.name);
userData.push(JSON.stringify(user));
data = new UsrData({ data: userData }); //===> Create a new NoSQL document with userData
data.save(); // ===> Save the document to MongoDb
io.emit('get-online-users-list', userData);
}
}
);
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
