Blog / Programming / 22. Чат через long-polling, чтение POST. Pt.1.

22. Чат через long-polling, чтение POST. Pt.1.

By Pavel Bragin 7,580 October 26, 2016

Category:

Всем привет! Цель этого занятия – научиться делать чат на Node.js. Для начала наш чат будет достаточно простой. Всего лишь каждый, кто заходит по этому url

http://localhost:3000/

автоматически попадает в комнату, в которой может получать сообщения от другого пользователя, находящегося в этой же самой комнате, в нашем случае переписка может вестись из разных браузеров. Мы будем делать его в начале без пользователей, базы данных, авторизации.

Для начала, рассмотрим как оно будет все устроено.

Алгоритм общения с сервером называется long-polling или длинные запросы.

Он, с одной стороны, очень простой, а с другой стороны, для 90% задач, когда нужно общаться с сервером, он отлично подходит. Посмотрим на него повнимательнее. Когда клиент хочет получать данные от сервера, то он отправляет на сервер XMLhttpRequest самый обычный запрос, но необычной является его обработка сервером. Сервер, получив такой запрос, не будет сразу на него отвечать, а просто оставит запрос подвисшим. В будущем, как только появятся данные для клиента, сервер ответит на этот запрос. Клиент получит ответ – сообщение, обработает его, выведет и сделает новый запрос на сервер. Сервер подождет, если данных нет. Как только данные появятся – тут же ответит. Фактически получается, что клиент старается все время держать рабочее соединение с сервером, по которому, как только данные будут готовы, он их сразу же получит.

Соответствующий код на стороне клиента выглядит так, создадим index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body class="container">
<p class="lead">Welcome to our chat!</p>

<form id="publish" class="form-inline">
    <input type="text" name="message"/>
    <input type="submit" class="btn btn-primary" value="Send"/>
</form>

<ul id="messages"></ul>

<script>
    publish.onsubmit = function() {

        var xhr = new XMLHttpRequest();

        xhr.open("POST", "/publish", true);

        xhr.send(JSON.stringify({message: this.elements.message.value}));

        this.elements.message.value = '';

        return false;
    };

    subscribe();


    function subscribe() {

        var xhr = new XMLHttpRequest();

        xhr.open("GET", "/subscribe", true);

        xhr.onload = function () {

            var li = document.createElement('li');
            li.textContent = this.responseText;
            messages.appendChild(li);

            subscribe();
        };

        xhr.openerror = xhr.onabort = function () {
            setTimeout(subscribe, 500)
        };

        xhr.send('');
    }
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<p class="lead">Welcome to our chat!</p>

</form>

publish.onsubmit = function() {

var xhr = new XMLHttpRequest();

xhr.open("POST", "/publish", true);

xhr.send(JSON.stringify({message: this.elements.message.value}));

this.elements.message.value = '';

return false;

};

subscribe();

function subscribe() {

var xhr = new XMLHttpRequest();

xhr.open("GET", "/subscribe", true);

xhr.onload = function () {

var li = document.createElement('li');

li.textContent = this.responseText;

messages.appendChild(li);

subscribe();

};

xhr.openerror = xhr.onabort = function () {

setTimeout(subscribe, 500)

};

xhr.send('');

}

</script>

</body>

</html>

Есть форма для отправки сообщений и есть список messages, куда сообщения приходят. При submit-форме создается XMLhttpRequest и сообщения обычным порядком постятся на сервер. А для получения новых сообщений, как раз используется алгоритм long-polling, описанный ранее. Есть функция subscribe, которая запускает XMLhttpRequest и говорит: получи данные с этого url. Когда будет получен ответ сервера, он показывается в виде сообщения, и заново вызывается функция subscribe, то есть, делается новый запрос. И так все это идет по кругу. Исключение, если произошла ошибка или что-то не так, в этом случае мы subscribe тоже заново оправим, но с небольшой задержкой, чтобы не “сломать” сервер.

Обратим внимание, что этот код реализует алгоритм long-polling. Он не привязан к какому-то конкретному чату, это просто код подписки на сообщение сервера. Его можно расширять, добавлять различные каналы получения сообщений и т.д. Сейчас мы пока этого делать не будем, а перейдем к Node.js. Для серверной части вы можете видеть небольшую заготовку, которая представляет собой http сервер, умеющий отдавать index.html в качестве главной страницы (создадим server.js и добавим соответствующий код):

var http = require('http');
var fs = require('fs');

http.createServer(function(req, res) {
    
    switch (req.url) {
        case '/':
            sendFile("index.html", res);
            break;

        case '/subscribe':
            //..
            break;

        case '/publish':
            //..
            break;

        default:
            res.statusCode = 404;
            res.end("Not found");
    }


}).listen(3000);


function sendFile(fileName, res) {
    var fileStream = fs.createReadStream(fileName);
    fileStream
        .on('error', function () {
            res.statusCode = 500;
            res.end("Server error");
        })
        .pipe(res)
        .on('close', function () {
            fileStream.destroy();
        });
}

var http = require('http');

var fs = require('fs');

http.createServer(function(req, res) {

switch (req.url) {

case '/':

sendFile("index.html", res);

break;

case '/subscribe':

//..

break;

case '/publish':

//..

break;

default:

res.statusCode = 404;

res.end("Not found");

}

}).listen(3000);

function sendFile(fileName, res) {

var fileStream = fs.createReadStream(fileName);

fileStream

.on('error', function () {

res.statusCode = 500;

res.end("Server error");

})

.pipe(res)

.on('close', function () {

fileStream.destroy();

});

}

Также будут два url: case '/subscribe' для подписки на сообщения и case '/publish' для отправки сообщений. Они в точности такие же, как вы видели в index.html . Мы начнем реализацию с подписки.

Функция subscribe со странички index.html будет отправлять длинные запросы именно на url subscribe. Клиент, который отправил запрос на subscribe, с одной стороны, не должен получить ответы прямо сейчас, с другой стороны, мы должны запомнить, что он обратился за данными, чтобы потом, когда данные появятся, ему их передать. Для решения этой задачи создадим специальный объект, который будет называться chat. chat.subscribe будет запоминать, что пришел клиент. Для этого мы передадим ему объекты req и res
а chat.publish будет пересылать сообщения всем клиентам, которые сейчас есть:

http.createServer(function(req, res) {

    switch (req.url) {
        case '/':
            sendFile("index.html", res);
            break;

        case '/subscribe':
            chat.subscribe(req, res);
            //..
            break;

        case '/publish':
            chat.publish('....');
            //..
            break;

        default:
            res.statusCode = 404;
            res.end("Not found");
    }

http.createServer(function(req, res) {

switch (req.url) {

case '/':

sendFile("index.html", res);

break;

case '/subscribe':

chat.subscribe(req, res);

//..

break;

case '/publish':

chat.publish('....');

//..

break;

default:

res.statusCode = 404;

res.end("Not found");

}

Описывать этот объект в чате мы будем в отдельном модуле, который расположу в текущей директории, добавим запись в server.js:

var chat = require('./chat');

1	var chat = require('./chat');

Создадим chat.js и добавим следующий код:

var clients = [];

exports.subscribe = function(req, res) {
    console.log("subscribe");
    
    clients.push(res);
    
};

exports.publish = function(message) {
    console.log("publish '%s'", message);

    clients.forEach(function(res) {
        res.end(message);
    });

    clients = [];
};

var clients = [];

exports.subscribe = function(req, res) {

console.log("subscribe");

clients.push(res);

};

exports.publish = function(message) {

console.log("publish '%s'", message);

clients.forEach(function(res) {

res.end(message);

});

clients = [];

};

Модуль будет хранить текущее подключение в массиве clients.

И при команде subscribe добавляет новый объект res в этот массив. Обратим внимание, что объекты req никуда не добавляются. В дальнейшем он нам не нужен, нам понадобится всего лишь отправлять этому клиенту сообщения, для этого res вполне хватает. Так что при запросе на url subscribe соответствующий объект res просто добавится в массив clients. Больше никаких действий с соединением мы не делаем, поэтому со стороны клиента это выглядит так, как будто запрос подвис, на него еще никто не ответил. Далее, в какой-то момент, приходит сообщение, вызывается exports.publish. и этот метод должен отправить сообщение всем клиентам, которые подписались. Для этого мы делаем цикл по массиву и отправляем каждому клиенту этот ответ:

clients.forEach(function(res) {
        res.end(message);
    });

clients.forEach(function(res) {

res.end(message);

});

res.end(message)тут же закрывает соединение, и мы очищаем массив clients, поскольку все соединения в нем уже закрыты, они больше не нужны. Давайте проверим этот код. Запускаем и заходим в браузер на url чата. Затем пишем что-нибудь. Мы видим, что приходят какие-то сообщения, но не то, что мы отправляем, потому что сейчас в методе publish на сервере стоит заглушка:

chat.publish("...");

1	chat.publish("...");

Материал урока взят из следующего скринкаста.

We are looking forward to meeting you on our website soshace.com

About the author

Pavel Bragin

Registered 20-10-2015 | Last seen long time ago 1

0 Comments | 86 Publications

Top developers

Alexey D. Frontend Developer
JS ReactHTML CSS Angular Show lessAll skills
Bryan C. Full-stack JavaScript developer
Angular CSSJS Node.js Show lessAll skills
Tedi C. Full-stack React/PHP developer
JS ReactCSS PHP Node.js Show lessAll skills
Juan F. Senior JavaScript developer
JS ReactNode.js HTML CSS Show lessAll skills

Umoren Samuel

26.03.2024

An Introduction to Clustering in Node.js

Picture your Node.js app starts to slow down as it gets bombarded with user requests. It's like a traffic jam for your app, and no developer likes ...

JavaScript Node.js

Javed Baloch

15.03.2024

JAMstack Architecture with Next.js

The Jamstack architecture, a term coined by Mathias Biilmann, the co-founder of Netlify, encompasses a set of structural practices that rely on ...

JavaScript Next.js Programming React

Umoren Samuel

7.03.2024

Rendering Patterns: Static and Dynamic Rendering in Nextjs

Next.js is popular for its seamless support of static site generation (SSG) and server-side rendering (SSR), which offers developers the flexibility ...

JavaScript React