Estoy haciendo una página web de una sola página.
Configuré un servidor node.js y lo hice para que pueda determinar si una solicitud de un usuario es una URL o una solicitud de recursos.
Cuando un usuario se une por primera vez, le envío el archivo index.html que luego solicita css, imágenes y javascript. (Todos estos son archivos esqueléticos... por ejemplo, archivos que son el diseño principal del sitio web con enlaces pero no el contenido real) En el javascript del lado del cliente, tengo un código que mira la URL en la que se encuentra el usuario y luego envía un solicite al servidor más html o css, todo bien hasta ahora.
Sin embargo, cuando actualizo la URL usando window.history.pushstate() (el usuario hace clic en la etiqueta <a> , evité el valor predeterminado) envía una solicitud al servidor para decirle al usuario que ha cambiado la URL, lo cual no hago. no quiero Esto se debe a que el javascript del lado del cliente debe enviar solicitudes de recursos para que pueda actualizar la página sin actualizar.
En mi servidor, no creo que haya una manera de saber si el cliente ya tiene el archivo index.html, por lo que cuando recibe una solicitud de URL, no sabe si enviar o no el archivo index.html (lo que provoca una actualización de página).
Me preguntaba si había alguna forma de evitar que pushstate() le dijera al servidor que el usuario ha cambiado la URL (ya que no es necesario) o si había una forma de saber si un usuario ya tiene el archivo index.html.
Sé que esto debería tener en cuenta casos como el usuario que tiene la página web abierta en varias pestañas diferentes (y index.html debe enviarse para cada pestaña individual) o la URL se cambia manualmente.
Si el servidor tiene que recibir la solicitud de URL, mi idea era usar las propiedades remoteAddress y remotePort y almacenarlas de alguna manera y luego compararlas cuando un usuario envía una solicitud. (asumiendo que una nueva pestaña usaría un puerto remoto diferente).
Lo siento, no pude incluir ningún código ya que estoy escribiendo esto en mi teléfono para no olvidar esta publicación por la mañana. No estoy usando express.js con node.js porque quiero sentirme cómodo sabiendo lo que sucede debajo antes de usar un módulo de abstracción. No estoy usando ningún otro marco, excepto javascript y jquery en la interfaz. Nodo puro en backend.
Esto no es necesariamente una solicitud de código, ya que me siento cómodo escribiendo el mío, solo necesito consejos sobre cómo debo hacerlo.
Entonces, resultó que en realidad nunca llamé a la función que llama al historial de inserción. A continuación se muestra mi código del lado del cliente (que funciona bien), en caso de que alguien se encuentre con un problema tonto como este en el futuro.
const main_page = ["/", "/index.html", "/home"]; const main_err = { 403: "FORBIDDEN", 404: "PAGE NOT FOUND" }; const sub_err = { 403: "Your request has been denied by the server.", 404: "It looks like that page doesn't exist." }; function get_error_message(status_num, html_request) { if (!html_request) {return status_num}; return `<style> .main-body {font-family: Arial} .main-body h6 {font-size: 14px;font-weight: lighter;margin: 0 0 5px 0;} .main-body h1 {font-size: 30px;margin: 0 0 12px 0;} .main-body h4 {font-size: 18px;font-weight: lighter;margin: 0;} </style> <h6>${main_err[status_num]}<h4> <h1>${status_num}</h1> <h4>${sub_err[status_num]}</h3>`; }; function make_request(url, html_request, callback) { let req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState === 4) { if (req.status === 200) {callback(req.responseText, true)} else {callback(get_error_message(req.status, html_request), false)}} } req.open("GET", url);req.send(); } function update_body(html) {document.getElementsByClassName("main-body")[0].innerHTML = html}; function nav_buttons(new_button) { window.scrollTo(0, 0); $(".main-link .active, .category-link .active").attr("class", "inactive"); $(new_button).attr("class", "active"); } window.addEventListener('popstate', function(event) { let data_passed = event.state make_request(data_passed[0], true, update_body) nav_buttons(data_passed[1]) window.scrollTo(0, 0) }); function navBarButtonClicked() { $(".main-link, .category-link").click(function(event) { event.preventDefault() let href = $(this).attr("href"); href = ((!main_page.includes(href)) ? href : "/home").substring(1); let html_page = "assets/static/pages/"+href+".html" console.log("REQUESTED PAGE:" + html_page) make_request(html_page, true, update_body) let id_of_element = "#" + $("> div", this).attr("id") history.pushState([html_page, id_of_element], null, `/${href}`); document.title = href nav_buttons(id_of_element) }); }; function __main__() { let href = window.location.pathname; href = ((!main_page.includes(href)) ? href : "/home").substring(1); document.title = href; //check if valid route in future let page_location = `assets/static/pages/${href}.html` history.replaceState([page_location, `#header-${href}`], "", `/${href}`); nav_buttons(`#header-${href}`) make_request(page_location, true, update_body) navBarButtonClicked(); }; __main__();