'net::ERR_SSL_PROTOCOL_ERROR after deployment to Netlify

enter image description hereMy 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