Создаем чат на node.js
Node.js

Создаем чат на node.js

Опубликовано Автор: Дмитрий Поляков / Нет комментариев

Веб-сервер на node.js

Всего несколько строк кода и веб-сервер на node.js готов

// Загружаем модуль http 
const http = require('http');

// Создаем web-сервер с обработчиком запросов
const server = http.createServer((req, res) => {
  console.log('Начало обработки запроса');
  // Передаем код ответа и http-заголовки
  res.writeHead(200, {
    'Content-Type': 'text/plain; charset=UTF-8'
  });
  res.end('Hello world!');
});

// Запускаем web-сервер
server.listen(3000, '127.0.0.1', () => {
  console.log('Сервер запущен http://127.0.0.1:3000/');
});

Для разработки пользуюсь Visual Studio Code https://code.visualstudio.com

Также неплохой совсем простой редактор notepad++ https://notepad-plus-plus.org

Терминал можно открыть в самом Visual Studio Code или в виндовс cmd.

Переходим в папку где лежит файл и запускаем:

node index.js

работает!

Ctrl ^ C – чтобы прервать выполнение программы.

Подключаем фреймворк Express

Код получится примерно такой:

var app = require('express') (); 
var http = require('http').createServer(app);

app.get('/' , function(req, res) { 
 res.send('<h1>Привет Мир</h1>'); 
}); 

http.listen(3000, function( ) { 
  console.log('Слушаем на *:3000');
});

Также его необходимо установить, в командной строке набираем:

npm install express

Или для того чтобы сохранить express в списке зависимостей в файле package.json, предварительно создав его:

простейший файл package.json

{
}

или так:

{
   "name": "test-chat" 
}

установка express с сохранение в списке зависимостей:

npm install express --save

Запускаем. И снова все работает.

Делаем чтобы наш сервер отдавал html страницу

Переписываем блок в index.js:

app.get('/' , function(req, res) { 
 res.sendFile(__dirname +'/index.html');
});

Создаем index.html:

<!doctype html>
<html>
  <head>
    <title>Чатик</title>
    <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font: 13px Helvetica, Arial; }
 form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
 form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
 form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
 #messages { list-style-type: none; margin: 0; padding: 0; }
 #messages li { padding: 5px 10px; }
 #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Отправить</button>
    </form>
  </body>
</html>

Запускаем и проверяем.

Подключаем socet.io

Устанавливаем socet.io

npm install --save socket.io

index.js получился:

var app =require('express') (); 
var http =require('http').Server(app);
var io =require('socket.io')(http);

app.get('/' , function(req, res) { 
 res.sendFile(__dirname +'/index.html');
}); 

io.on('connection', function(socket) { 
  console.log('Подключился пользователь');
}); 

http.listen(3000, function( ) { 
  console.log('Слушаем на *:3000');
});

В index.html перед закрывающим тегом </body> добавляем подключение клиентской части socket.io:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

В index.js – также запускаем событие на отсоединение пользователя:

io.on('connection', function(socket) { 
    console.log('Подключился пользователь'); 
   socket.on('disconnect', function() {
      console.log('Отключился пользователь');
   });
});

Запускаем и видим, сколько вкладок открыть, столько и будет подключенных пользователей. При закрытии в консоль пишется, что пользователь отключился.

Отправка сообщений

Переписываем чуть-чуть index.html

    <script src= "/socket.io/socket.io.js"></script> 
    <script src= "https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    $(function() { 
        var socket = io();
    $('form').submit(function(e) { 
     e.preventDefault();
     socket.emit('chat message', $('#m').val());
    $('#m').val(""); 
          return false;
    });
    }); 
    </script>

index.js добавляем, обработчик события ‘chat message’

io.on('connection', function(socket) { 
    console.log('Подключился пользователь'); 
    socket.on('disconnect', function() {
        console.log('Отключился пользователь');
    }); 
    socket.on('chat message', function(msg) { 
        console.log('Пришло сообщение: ' + msg);      
   });
});

Запускаем, проверяем. Сообщения отлично приходят в консоль.

Рассылка сообщений всем

Добавляем в index.js строчку:

io.emit('chat message', msg);

Редактируем index.html

    <script src= "/socket.io/socket.io.js"></script> 
    <script src= "https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    $(function() { 
        var socket = io();
        $('form').submit(function(e) { 
        e.preventDefault();
        socket.emit('chat message', $('#m').val());
        $('#m').val(""); 
            return false;
        });      
        socket.on('chat message', function(msg) {
            $('#messages').append($('<li>').text(msg));          
        });
    }); 
    </script>

Запускаем и тестируем.

Чат работает. Быстро и просто!

Дмитрий Поляков

Оставить комментарий