Thing

I have some code, and I'm hosting that with a live server along with a backend. It's a web-proxy that I'm currently working on, although I'm fairly new to networking and coding in general. In my code, if I type in something to the search engine, it'll filter it down to either /search or /url (express event listeners), but I'm having trouble displaying the response and visiting the actual websites (i.e. Youtube). The problem is that I can only load the basic HTML/CSS structure and not the actual videos, which I think I could solve using webSockets to create a stable connection. Slightly unrelated but here's my setup- 1. My computer hosts the backend server and live server (I'll use ngrok tunneling later). 2. When I'm at school, I'll use my iPad to connect to the live server. 3. If I wanted to visit a website such as Youtube, the request would go thru the server to the backend and my computer would have a stable connection with Youtube as if my computer was the one who was requesting it, forwarding data back to the live server which would display whatever was searched up. Here's my code for reference (if it helps)- index.js: ``` let tabCount = 1; function showTab(tabId) { const tabs = document.querySelectorAll('.tab-content'); tabs.forEach(tab => { tab.classList.remove('active'); }); document.getElementById(tabId).classList.add('active'); const tabElements = document.querySelectorAll('.tab'); tabElements.forEach(tab => { tab.classList.remove('active'); }); event.target.classList.add('active'); } function addNewTab() { tabCount++; const newTabId = `tab${tabCount}`; const newTab = document.createElement('div'); newTab.className = 'tab'; newTab.textContent = `Tab ${tabCount}`; newTab.setAttribute('onclick', `showTab('${newTabId}')`); document.querySelector('.add-tab').before(newTab); const newTabContent = document.createElement('div'); newTabContent.id = newTabId; newTabContent.className = 'tab-content'; newTabContent.innerHTML = `

`; document.body.appendChild(newTabContent); } document.addEventListener("keydown", function (event) { if (event.key === "Enter") { const activeTab = document.querySelector('.tab-content.active'); const searchInput = activeTab.querySelector('input[type="text"]'); const inputValue = searchInput.value; const isUrl = /^https?:\/\//i.test(inputValue); const fetchUrl = isUrl ? `/urls?url=${encodeURIComponent(inputValue)}` : `/search?q=${encodeURIComponent(inputValue)}`; fetch(fetchUrl) .then((response) => response.text()) .then((data) => { console.log(data); }) .catch((error) => { console.error(error.message); }); } }); ``` server.js: ``` const express = require('express'); const https = require('https'); const http = require('http'); const app = express(); const port = 5506; app.use(express.static('public')); const rewriteUrls = (html, baseUrl) => { return html.replace(/(href|src)="([^"]*)"/g, (match, attr, url) => { const absoluteUrl = new URL(url, baseUrl).toString(); return `${attr}="/proxy?url=${encodeURIComponent(absoluteUrl)}"`; }); }; app.get('/search', (req, res) => { const query = req.query.q; const googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`; https.get(googleSearchUrl, (response) => { let data = ''; response.on('data', chunk => { data += chunk; }); response.on('end', () => { const rewrittenData = rewriteUrls(data, googleSearchUrl); res.send(rewrittenData); }); }).on('error', (err) => { res.status(500).send('Error: ' + err.message); }); }); app.get('/urls', (req, res) => { let targetUrl = req.query.url; const client = targetUrl.startsWith('https://') ? https : http; client.get(targetUrl, (response) => { let data = ''; response.on('data', (chunk) => { console.log('Sending URL results back'); data += chunk; }); response.on('end', () => { res.send(data); }); }).on('error', (err) => { console.error('Error fetching URL:', err); res.status(500).send('Error: ' + err.message); }); }); app.get('/proxy', (req, res) => { const resourceUrl = req.query.url; https.get(resourceUrl, (response) => { response.pipe(res); }).on('error', (err) => { res.status(500).send('Error: ' + err.message); }); }); app.listen(port, () => { console.log(`Server running at http://localhost:${port}`); }); ``` index.html: ``` Thing

Tab 1

``` If you've tried to host a live server on Visual Studio Code with this code, opened developer tools, typed something into the "search bar" and pressed enter, then a response from Google would appear into the console. Same thing works for URLs but they need to be in full (i.e. https://www.youtube.com). In conclusion, I just need help displaying the response and handling for webSockets which would allow for a stable connection between the backend server (my computer) and whatever website I'm visiting on my iPad. Sorry if I'm not clear enough (it's pretty late)! Thank you to anyone if they could help me!

l_21fbb1644a69

webSockets to access websites

Join Our Newsletter. No Spam, Only the good stuff.