Первое приложение на Node.js

Node.js является платформой, позволяющей языку JavaScript выйти за пределы web браузера. В основном Node.js выполняется на сервере, но для энтузиастов есть возможность разрабатывать и декстопные приложения для Windows, Linux и Mac…

Для начала работы с Node.js необходимо его установить, скачать необходимые пакеты можно на сайте nodejs.org. Разрабатывать для Node.js можно и в блокноте, а запускать написанный код через консоль, но на мой взгляд, гораздо удобнее использовать IDE. Я буду использовать Visual Studio 2013, для этого необходимо установить Node.js Tools. Сделать это можно перейдя в TOOLS Extensions and Updates, и введя в поиск Node.js

После установки создаём новый Node.js проект. Для этого выбираем File New Project Templates Other LanguagesJavaScript Blank Node.js Web Application

Созданное приложение будет содержать следующий код:

var http = require('http');
var port = process.env.port || 1337;
http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
}).listen(port);

Данной код выводит сообщение «Hello World» в браузере. Для запуска достаточно нажать Ctrt + F5. После чего в браузере можно будет увидеть соответствующую надпись.

Если для запуска проекта вы хотите использовать консоль, то для этого достаточно открыть в ней проект и набрать node server.js, после чего сервер также будут запущен, но перейти по адресу http://localhost:1337 уже придётся вручную.

Теперь пришло время определиться с тем, что же будет делать наше первое приложение. Для начала реализуем то, что на Node.js реализуется очень просто, а именно чат. Чат будет работать через веб интерфейс новый пользователь будет получать 10 последних сообщений.

Для начала добавим в проект модули, которых не хватает, это express и socket.io. Добавить модули можно воспользовавшись консолью через npm или, если вы работаете в Visual Studio, нажать правой кнопкой на npm, и выбираем «Install New npm Packages…»

Теперь приступим к серверу, его код будет выглядеть следующим образом.

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

var messages = [];

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});
app.use(express.static(path.join(__dirname , 'public')));
io.on('connection', function (socket) {
    console.log("Подсоединился новый пользователь");
    socket.on('message', function (msg) {
        if (msg.length > 0) {
            console.log("Новое сообщение: " + msg);
            io.emit('message', msg);
            messages.push(msg);
            if (messages.length > 10) {
                messages.splice(0, 1);
            }
        }
    });
    socket.on('disconnect', function () {
        console.log("Пользователь вышел...");
    });
    socket.on('first', function () {
        for (var i = 0; i < messages.length; i++) {
            socket.emit("message",
                messages[i]);
        }
        
    });

});
http.listen(3000, function () {
    console.log('Чат запущен, порт: 3000');
});

Код сервера достаточно понятный, думаю нет смысла более детально описывать каждый блок. Если возникнут вопросы — задавайте их в комментариях, с удовольствием отвечу.

Теперь перейдём к клиентской части. Клиент будет представлять из себя веб страничку. Будут использоваться JavaScript библиотеки jQuery и Socket.io.

Код клиентской части будет выглядеть следующим образом.

<!doctype html>
<html>
<head>
    <title>Чат на Node.js</title>
    <link href="/styles/style.css" rel="stylesheet" />
    <script src="/js/socket.io-1.2.0.js"></script>
    <script src="/js/jquery-2.1.3.js"></script>
</head>
<body>
    <ul id="messages"></ul>
    <div id="sendForm">
        <form action="">
            <input id="message" autocomplete="off" /><button class="button">Отправить сообщение</button>
        </form>
    </div>
    <script type="text/javascript">
        var socket = io();
        socket.emit('first', "true");
        $('form').submit(function () {
            var message = $('#message').val();
            if (message.length > 0) {
                socket.emit('message', message);
                $('#message').val('');
            }
            return false;
        });
        socket.on('message', function (msg) {
            $('#messages').append($('<li>').text(msg));
        });
    </script>
</body>
</html>

Теперь запускаем наше первое Node.js приложение. Сразу после запуска можно увидеть вот такое окно.

Теперь откроем в браузере адрес http://localhost:3000 откроется окно чата, без сообщений. Добавим в чат 12 новых сообщений
Теперь откроем эту же страницу на новой вкладке либо в другом браузере.
Как можно видеть, новому пользователю доступны только 10 последних сообщений. Закроем вкладку нового пользователя и посмотрим на лог, который велся в консоли сервера.

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

Исходный код приложения можно увидеть здесь: https://github.com/flash2048/FirstNodeJsApp

Приятного программирования.

Комментарии (5) -

Вот именно такого пакета я не нашёл. Просмотрел всё. В первой строке пакет с другим названием и от другого производителя. Надеюсь, это то что нужно. Ставлю, буду пробовать

Называется так:
Node.js Tools 1.1 for Visual Studio 2013

Created by: Node.js Tools for Visual Studio

Из консоли (node app.js) запускается, а по Ctrl+F5 - не работает. В браузере набираю http://localhost:1337 выдаёт This site can’t be reached

Впечатляет, что кода немного. Я даже не представляю насколько сложнее было бы реализовать точно такую же задачу на PHP. Но всё таки пока что сложно всё понять с первого раза

Пожелание - сделать ещё один тутор с клиентом на C# для сервера на Node.js

К предыдущему пожеланию: http://socketio4net.codeplex.com/

Мне удалось сделать чат, в котором в роли клиента WPF приложение. Я поставил из NuGet пакет: https://github.com/Quobject/SocketIoClientDotNet

server.js


// Подключаем нужные библиотеки
var io = require('socket.io')(process.env.PORT || 1337);
var shortid = require('shortid');

// Выводим сообщение, что клиент запущен
console.log('server started');

// Это функция вызывается, как только подключается клиент
io.on('connection', function (socket) {

    // Генерируем ID для подсоединившегося клиента, т.е. для текущего
    var thisClientId = shortid.generate();

    // Выводим ID текущего клиента
    console.log('client connected, broadcasting spawn, id: ', thisClientId);

    // Отправляем сообщение всем клиентам
    socket.broadcast.emit(thisClientId + ' is connected');

    // Принимаем сообщение и отсылаем остальным клиентам
    socket.on('message', function (data) {
        // Выводим принятое сообщение в консоль
        console.log('message: ' + JSON.stringify(data));
        // Пересылаем принятое сообщение остальным клиентам
        socket.broadcast.emit('message', data);
    });

    // Выводим сообщение, что клиент отсоединился
    socket.on('disconnect', function () {
        console.log('client disconnected');
    });
});

Клиент:

using System;
using System.Windows;
using System.Windows.Threading;

namespace ChatBySocketIoClientDotNet
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        string name = Environment.MachineName;
        Quobject.SocketIoClientDotNet.Client.Socket socket;

        public MainWindow()
        {
            InitializeComponent();
            socket = Quobject.SocketIoClientDotNet.Client.IO.Socket("http://localhost:1337");

            socket.On("message", (data) =>
            {
                Dispatcher.Invoke(new Action(() => {
                    OutputTextBox.Text += "reply: " + data + Environment.NewLine;
                }), DispatcherPriority.ContextIdle);
            });
        }

        private void SendButton_Click(object sender, RoutedEventArgs e)
        {
            socket.Emit("message", InputTextBox.Text);
            OutputTextBox.Text += name + ": " + InputTextBox.Text + Environment.NewLine;
            InputTextBox.Text = "";

            // ScrollBar to Bottom
            OutputTextBox.Focus();
            OutputTextBox.CaretIndex = OutputTextBox.Text.Length;
            OutputTextBox.ScrollToEnd();

            // Focus to Input
            InputTextBox.Focus();
        }
    }
}

<Window x:Class="ChatBySocketIoClientDotNet.MainWindow"
        xmlns="schemas.microsoft.com/.../presentation";
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml";
        Title="Chat" Height="350" Width="525" ResizeMode="CanMinimize">
    <Grid>
        <TextBox x:Name="OutputTextBox" HorizontalAlignment="Left" Height="214" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="497" IsReadOnly="True" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
        <TextBox x:Name="InputTextBox" HorizontalAlignment="Left" Height="81" Margin="10,229,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="316" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
        <Button x:Name="SendButton" Content="Send" HorizontalAlignment="Left" Margin="331,229,0,0" VerticalAlignment="Top" Width="176" Height="81" Click="SendButton_Click"/>

    </Grid>
</Window>

Добавить комментарий