Создание веб-приложения для чата на основе Node.js: подключение с помощью WebSockets

Теперь я добавлю еще одну строку в конце, чтобы создать новый блок.

 block body_end 

Я делаю это так, чтобы любой Jade-файл, который расширяет layout.jade также мог добавлять теги script непосредственно перед концом тега body.

Теперь мы хотим использовать этот новый блок, чтобы добавить ссылку на наш файл index.js который мы создадим в папке public/js , обязательно создайте файл.

 block body_end script(type='text/javascript' src='/js/index.js') 

Удостоверьтесь, что блок начинается с нулевого отступа, чтобы следовать соглашениям кодирования Jade. Если вы запустите сервер Node.js и перейдете на главную страницу своего браузера, вы увидите в инструментах F12, что файлы обслуживаются правильно.

Быстрые изменения в app.js

Есть несколько вещей, которые я хочу изменить в app.js Во-первых, я хочу изменить направление сортировки, чтобы самые старые сообщения отправлялись первыми и вторыми. Я также хочу отправлять ранее полученные сообщения чата на тот же канал, на котором планирую получать новые сообщения. Изменения пойдут в строку 49 и 50 в app.js Это результат:

 var stream = collection.find().sort().limit(10).stream(); stream.on('data', function (chat) { socket.emit('chat', chat.content); }); 

Не забудьте установить CUSTOMCONNSTR_MONGOLAB_URI среды CUSTOMCONNSTR_MONGOLAB_URI перед app.js файла app.js как в противном случае бэкэнд Node.js будет аварийно app.js когда он не сможет подключиться к вашей MongoDB.

Включение кнопки отправки

Настало время включить эту кнопку отправки, чтобы отправлять сообщения в окне сообщений с помощью WebSockets на внутренний сервер в канале чата.

 var socket = io(); $('#send-message-btn').click(function () { var msg = $('#message-box').val(); socket.emit('chat', msg); $('#messages').append($('<p>').text(msg)); $('#message-box').val(''); return false; }); socket.on('chat', function (msg) { $('#messages').append($('<p>').text(msg)); }); 

Строка 1

Мы хотим создать сокет, и мы можем сделать это, вызвав функцию io() которая находится в socket.io-client.js .

Линия 2

После этого мы хотим выполнить функцию нажатием кнопки «Отправить сообщение», используя функцию jQuery $() и метод click() .

Линия 3

Мы получим строковое значение в окне сообщения, используя функцию jQuery $() и метод val() .

Строка 4

Мы используем функцию emit() для переменной сокета, которую мы создали в строке 1, чтобы отправить сообщение по каналу «chat», содержащее значение окна сообщения.

Строка 5-7

На этом этапе мы добавим сообщение в окне сообщений в div , в котором в качестве идентификатора сообщения будут использоваться messages , чтобы пользователь мог видеть, что сообщение было отправлено. Мы присвоим значение окна сообщения пустой строке, чтобы очистить его.

Линия 9-10

Мы хотим добавить сообщение, полученное по каналу чата от других пользователей, в div , в котором messages идентификатор. Серверная часть Node.js не будет повторно отправлять сообщение, которое клиент записал обратно себе, но это нормально, потому что мы сразу добавили сообщение в обработчик функции click() .

Вывод

Вуаля! Вы подключили свой бэкэнд и интерфейс с помощью WebSockets. Если вы хотите идентифицировать людей в чате или добавить аватар для каждого пользователя, это ваше дело, но вы можете использовать этот чат в дальнейшем. В следующей части я покажу вам, как развернуть этот анонимный чат в Azure, и покажу, как его можно отладить.

Оставайтесь с нами для части 6!

Часть 6. Финал и отладка приложений удаленного узла! здесь Вы можете быть в курсе этой и других статей, следуя моей учетной записи в Twitter

Подробнее Node.js Обучение на Azure

Для более глубокого изучения на узле, мой курс доступен здесь, в Microsoft Virtual Academy.

Или видео в более коротком формате на похожие темы:

• Серия из шести частей: Создание приложений с помощью node.JS

• Прогулка по узлу (Coding4Fun)

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Project Spartan и его новым механизмом рендеринга . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows на сайте modern.IE .