Require not defined in socket.io implementation in .js file

Question

I'm unable to perform chat functionality in my application. I have created a port 8000 on which my applicattion runs. I'm trying to implement the socket.io module inside my application. For this i have created another file named as chat.js. Firstly I define socket as socket= io(). Then it was showing error as

//GET /socket.io/?EIO=3&transport=polling&t=NAO4VZg 404 6.362 ms - 1908"

Then after lots of searches i found the replacement for the above statement as

var socket = require('socket.io-client')('http://localhost:8000/users/chatter', { transports: ['websocket'] })

Now running the code with this statement. The below error is displaying:

chat.js:1 Uncaught ReferenceError: require is not defined
  at chat.js:1

Here is the screenshot of error:

After lots of searches i found the replacement for the above statement as

var socket = require('socket.io-client')('http://localhost:8000/users/chatter', { transports: ['websocket'] })
var message = document.getElementById('message'),
      handle = document.getElementById('handle'),
      btn = document.getElementById('send'),
      output = document.getElementById('output'),
      feedback = document.getElementById('feedback');

// Emit events
btn.addEventListener('click', function(){
    socket.emit('chat', {
        message: message.value,
        handle: handle.value
    });
    message.value = "";
});

message.addEventListener('keypress', function(){
    socket.emit('typing', handle.value);
})

// Listen for events
socket.once('connect', socketConn => {
socket.on('chat', function(data){
    feedback.innerHTML = '';
    output.innerHTML += '<p><strong>' + data.handle + ': </strong>' + data.message + '</p>';
});

socket.on('typing', function(data){
    feedback.innerHTML = '<p><em>' + data + ' is typing a message...</em></p>';
});
}); 

Now running the code with this statement. The below error is displaying:

chat.js:1 Uncaught ReferenceError: require is not defined
  at chat.js:1