en_USet

Harjutus 11: Vestlusruum serveri ja klientrakenduse vahel

  1. Ava terminal source/repos, et luua uus kaust.

3. Avame Visual Studio Code ja installime ws-raamatukogu
(npm install ws).

4. Ava projekt VS Code’is ja loo index.js

5. Node’i WebSocket’i sisaldamine.

const http = require("http")
const fs = require("fs")
const ws = new require("ws")

6. Serveri seadistamine

const wss = new ws.Server({noServer: true});

function accept(req,  res) {
    if(req.url === "/ws" && req.header.upgrade &&
        req.headers.update.toLowerCase() === "websocket" &&
        req.headers.connection.match(/\bupgrade\b/i)){
            wss.handleUpdgrede(req, req.socker, Buffer.alloc(0), onSocketConnect);
    }
    else if (req.url === "/") { //index.html
        fs.createReadStream("./index.html").pipe(res);
    }
    else {
        res.writeHead(404);
        res.end();
    }
}

7. Loome index.html

<!doctype html>
<form name="publish">
    <input type="text" name="message" maxlength="50"/>
    <input type="submit" value="Send"/>
</form>
 
<div id="messages"></div>
 
<script>
    let url = location.host == 'localhost' ?
        'ws://localhost:8080/ws' : location.host == 'javascript.local' ?
            `ws://javascript.local/article/websocket/chat/ws` : // dev integration with local site
            `wss://javascript.info/article/websocket/chat/ws`; // prod integration with javascript.info
    //создаем объект с вебсокетом
    let socket = new WebSocket(url);
 
    // отправляем сообщение на форму
    document.forms.publish.onsubmit = function() {
        let outgoingMessage = this.message.value;
 
        socket.send(outgoingMessage);
        return false;
    };
 
    // обрабатываем входящие сообщения
    socket.onmessage = function(event) {
        let incomingMessage = event.data;
        showMessage(incomingMessage);
    };
    //если пользователь закрыт сокет, то пишем об этом в консоли
    socket.onclose = event => console.log(`Closed ${event.code}`);
 
    // показываем сообщения в div#messages
    function showMessage(message) {
        let messageElem = document.createElement('div');
        messageElem.textContent = message;
        document.getElementById('messages').prepend(messageElem);
    }
</script>

8. Ühenduse loomine

// Kliendide loomine
const clients = new Set();

// Ühenduse loomine
function onSocketConnect(ws){
    clients.add(ws);
    ws.on('message', function(message) {
        message = message.slice(0, 50); //maksimaalne pikkus on 50'
        for(let client of clients) {client.send(message);}
    });

    ws.on('close', function(){
        console.log("connection closed");
        clients.delete(ws);
    });
}

9. Teksti kuvamine

let log;

if(!module["parent"]){
    log = console.log;
    http.createServer(accept).listen(8080);
} else{
    log = function() {};
    exports.accept = accept;
}

Kontrollimine:

Käivitame faili index.js Node.js abil.

Ava fail index.html fail exploreri kaudu.