Node.js Websocketti keskustelemaan HTML-sivun kanssa (edistymispalkki, filun uppaus).

[Jean_Sipulius]

Hei!

Mulla on Node-taidot tosi kehnoilla kantimilla ja tarvitsisin systeemin, jossa näytetään edistymispalkki kun tiedosto upataan. Käytän pohjana Expressiä ja sen tuomia Routereita. Minulla on filun uppaus toiminnassa Multerilla, jossa saan tulostettua konsoliin edistymisen. Tämä edistyminen pitäisi nyt alkuun saada webbisivulle ihan vaikka numeroina. Osaisitteko auttaa?

Routerissa minulla on seuraavanlainen systeemi. Ideana on, että ennen uppausta ajetaan middleware, joka tallentaa edistymisen ja lähettää tämän funktioon nimeltä SetProgress.

var express = require('express');
var router = express.Router();
let pakdata = require('../controllers/PAKData.js');
const access = require('../middleware/hasAuth').hasAccess;
let multer = require('multer')
var upload = multer({ dest: "./public/PAKs" })

/****************** GET *******************/
router.get('/get_pakdata', pakdata.show_pakdata); // HTML-page
router.get('/getPAKs', pakdata.getPAKs); // Get list of PAKS with info

/****************** POST ******************/
// Middleware to show progress before multer.
function progress_middleware(req, res, next){
    let progress = 0;
    const file_size = req.headers["content-length"];
    
    // set event listener
    req.on("data", (chunk) => {
        progress += chunk.length;
        const percentage = (progress / file_size) * 100;
        pakdata.setProgress(percentage)
    });

    next();
}
router.post('/uploadPAK', progress_middleware, upload.single("file"), pakdata.uploadPAK);
module.exports = router;

Sitten SetProgress funktio ei tee käytännössä mitään erikoista. Se asettaa globaalin muuttujan siihen lukuun mikä on edistyminen.

    exports.setProgress = function (progress) {
        progressGlobal = progress
        console.log(progressGlobal)
        }

Varsinainen uploadPAK tekee seuraavaa. Ideana on, että kun filu on upattu, se uudelleen nimetään ja sen tiedot tallennetaan tietokantaan.

exports.uploadPAK = function (req, res, next) {
    console.log("Upload Process")

	console.log(req.body);
		
    fs.rename("./public/PAKs/" + req.file.filename, "./public/PAKs/" + req.file.originalname);


    console.log("renamed");
    
    let newPak = models.PAKData.build({
        MapName: req.body.mapName,
        Description: req.body.description,
        Pakname: req.file.originalname,
        PakFileSize: req.file.size,
        PathToFile: "PAKs/" + req.file.originalname,
        Creator: req.body.creator,
    });

    // Save the user object to database
    return newPak.save().then(result => {
        res.redirect('/pakdata/get_pakdata')
    })}
{

Minulla on Socket-yhteys olemassa. Se rakennetaan ja luodaan kokonaan omassa tiedostossa nimeltä SocketIOConnections.js.
Siellä yhteydet alkaa tällä tavalla:

exports = module.exports = function(io) {
// Täällä .on('connection') -systeemit
}

Ideana on, että tämä socketti on exportissa, jolloin se käynnistetään kun serveri käynnistyy. Tähän sockettiin haluaisin yhdistää. Minulla on sinne yhteys toisesta sovelluksesta, mutta en hoksaa yhtään, että miten saisin tähän yhteyden sitten verkkosivulta, joka pyörii myös tällä samalla palvelimella. Missä kohtaa se pitää tehdä ja miten.

Niin, ja loppuun vielä miten renderöin HTML-sivun. Tämä tapahtuu show_pakdata -funktion avulla.

exports.show_pakdata = function (req, res) {
console.log("OK")
  // res.sendfile('./public/Paks/test.txt');
     res.render('pakdata/show_pakdata.hbs');
}

Jos jotain oleellista alkutietoa puuttuu, kerron kysyttäessä.

 

[Zvona]

Hei!

Mulla on Node-taidot tosi kehnoilla kantimilla ja tarvitsisin systeemin, jossa näytetään edistymispalkki kun tiedosto upataan. Käytän pohjana Expressiä ja sen tuomia Routereita. Minulla on filun uppaus toiminnassa Multerilla, jossa saan tulostettua konsoliin edistymisen. Tämä edistyminen pitäisi nyt alkuun saada webbisivulle ihan vaikka numeroina. Osaisitteko auttaa?

Koodi näyttää suht. sujuvalta, ainakaan äkkiseltään ei osunut mitään silmään. Sen sijaan olisin tiedustellut, että miten kuuntelet socketia selaimen puolella? Vai koskeeko kysymys nimenomaan client-toteutuksen kirjoittamista?

Itse käytin joskus ammoisina aikoina Socket.IO, jonka API on melko robusti perusyhteyksien pubsubiin. Toki ei sen tekeminen pitkästäkään tavarasta kovin monimutkaiselta vaikuta: WebSocket - Web APIs | MDN .

Pääsetkö näillä alkuun?

 

[Jean_Sipulius]

Koodi näyttää suht. sujuvalta, ainakaan äkkiseltään ei osunut mitään silmään. Sen sijaan olisin tiedustellut, että miten kuuntelet socketia selaimen puolella? Vai koskeeko kysymys nimenomaan client-toteutuksen kirjoittamista?

Itse käytin joskus ammoisina aikoina Socket.IO, jonka API on melko robusti perusyhteyksien pubsubiin. Toki ei sen tekeminen pitkästäkään tavarasta kovin monimutkaiselta vaikuta: WebSocket - Web APIs | MDN .

Pääsetkö näillä alkuun?

Kiitti.

Tuon socketin kanssa mulla on nämä ongelmat onkin. Mulla on joku aivolukko ollut päällä pitkän aikaa ja en siis yhtään tiedä mistä mun kannattaisi aloittaa, että saisin ton renderöidyn .HBS sivun keskustelemaan socketin välityksellä, sekä niin, että kun tuo SetProgress-funktio ajetaan niin toi HBS osaisi ottaa sille heitetyn luvun vastaan. Tuo Websocket tähän varmasti onkin ratkaisu kun sen saa implementoitua oikeaan kohtaan. Mihin funktioon/filuun siis tuota ohjeissa olevaa logiikkaa lähdetään rakentamaan?

 

[Zvona]

Katselepa tuosta pikaesimerkistä skriptin pätkä: https://codepen.io/zvona/pen/oNVoYWz?editors=1010 (siellä ylhäällä on kolmen askeleen ohjeet)

const socket = new WebSocket(<SERVER_URL>);
const pingServer = () => {
  socket.send(`Ping ${Date.now()}`);
};

socket.addEventListener("open", (event) => {
  console.info("Connection Successful");
});

socket.addEventListener("error", (event) => {
  console.error("Error in connection", event.type);
});

socket.addEventListener("message", ({ data }) => {
  console.info(data);
});

 

[Jean_Sipulius]

Kiitos! Koitan näitä ohjeita! Vaikuttaa selkeältä.

 

[Jean_Sipulius]

Sain toimimaan! Käytin tosiaan ihan eri palikkaa kuin tuota socket.io. Luin, että siinä ei saa edes websocketteja toimimaan. Laitoin sen rinnalle varsinaisen websocket-moduulin johon sitten yhdistin html-sivun <script> -osiossa. Nyt uppitulokset näkyy nätisti sivulla.