Socket.IO not connecting from web browser - node.js

Question

I am trying to build live location tracking using socket and nodejs
but i am unable to connect to websocket using socket.io below is the code of node js server
const fs = require('fs');
const http = require('http');
const https = require('https');
const express = require('express');
var app = require('express')();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
var options = {
key: fs.readFileSync('path.pem'),
cert: fs.readFileSync('path/cert.pem'),
ca: fs.readFileSync('path/cert.pem'),
requestCert: true,
rejectUnauthorized: false
};
var io = require('socket.io')(https, {
cors: {
origin: "https://aayo.express:3000",
methods: ["GET", "POST"]
}
});
app.get('/', function(req, res) {
res.sendfile('index.html');
});
//Whenever someone connects this gets executed
io.on('connection', function(socket) {
console.log('A user connected');
setTimeout(function() {
//Sending an object when emmiting an event
socket.emit('testerEvent', { description: 'A custom event named testerEvent!'});
}, 4000);
socket.on('clientEvent', function(data) {
console.log(data);
});
//Whenever someone disconnects this piece of code executed
socket.on('disconnect', function () {
console.log('A user disconnected');
});
});
// http.listen(3000, function() {
// console.log('listening on *:3000');
// });
https.createServer(options, function (req, res) {
res.writeHead(200);
res.end("hello world\n");
console.log(req);
console.log('listening on *:3000');
}).listen(3000);```
below is my html file
#extends(backpack_view('blank'))
#section('after_styles')
<!-- Web Fonts
================================================== -->
<link href="https://fonts.googleapis.com/css?family=Muli:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="{{asset('frontend/css/bootstrap.min.css')}}"/>
<link rel="stylesheet" href="{{asset('frontend/css/font-awesome.min.css')}}"/>
<link rel="stylesheet" href="{{asset('frontend/css/ionicons.min.css')}}"/>
<!-- <link rel="stylesheet" href="{{asset('frontend/css/owl.carousel.css')}}"/>
<link rel="stylesheet" href="{{asset('frontend/css/owl.transitions.css')}}"/>
<link rel="stylesheet" href="{{asset('frontend/css/style.css')}}"/> -->
#endsection
#section('content')
<div class="loader">
<div class="loader__figure"></div>
</div>
<!-- Nav and Logo
================================================== -->
<iframe src="https://aayo.express:3000"></iframe>
<!-- Primary Page Layout
================================================== -->
<div class="section full-height over-hide">
<div id="map" class="" style="width:100%;height:600px;"></div>
<div class="tracking-info">
<ul>
<li><b>Driver Name: </b> Subash Rijal </li>
<li><b>Phone no.</b> 0123456789</li>
<li><b>Distance: </b> 5km</li>
</ul>
</div>
</div>
<!-- Modal -->
#endsection
#section('after_scripts')
<!-- JAVASCRIPT
================================================== -->
<script src="{{asset('frontend/js/jquery.min.js')}}"></script>
<script src="{{asset('frontend/js/popper.min.js')}}"></script>
<script src="{{asset('frontend/js/bootstrap.min.js')}}"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcI96mdv1eVkGj4p3L61Xyri_SFUNA3xI&callback=initMap"></script>
<script src="{{asset('frontend/js/plugins.js')}}"></script>
<!-- <script src="https://cdn.socket.io/3.0.5/socket.io.min.js'"></script> -->
<script src="{{asset('js/socket.io.js')}}"></script>
<script src="{{asset('js/live-location.js')}}"></script>
<script src="{{asset('frontend/js/custom.js')}}"></script>
<script>
function initMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("map"),mapProp);
}
</script>
<script>
</script>
<!-- End Document
================================================== -->
#endsection
how can i solve this? i am using nodejs, and server code to run it
if you have any experience in it could you please help me to solve this?
thanks in advance