Как быстро создать приложение чата с трещоткой

 . hidden { display :  none ; 
 } 

 #wrapper { width :   800px ; margin :   0   auto ; 
 } 

 #leave-room { margin - bottom :   10px ; 
     float :  right ; 
 } 

 #user-container { width :   500px ; margin :   0   auto ; text - align :  center ; 
 } 

 #main-container { width :   500px ; margin :   0   auto ; 
 } 

 #messages { height :   300px ; width :   500px ; border :   1px  solid #ccc; padding :   20px ; text - align :  left ; overflow - y :  scroll ; 
 } 

 #msg-container { padding :   20px ; 
 } 

 #msg { width :   400px ; 
 } 

 . user { font - weight :  bold ; 
 } 

 . msg { margin - bottom :   10px ; overflow :  hidden ; 
 } 

 . time { 
     float :  right ; color :   #939393; font - size :   13px ; 
 } 

 . details { margin - top :   20px ; 
 } 

JS

И для нашего файла JavaScript ( js/main.js ) у нас есть следующее:

 ( function (){ 

     var  user ; 
     var  messages =   []; 

     var  messages_template =   Handlebars . compile ( $ ( '#messages-template' ). html ()); 

     function  updateMessages ( msg ){ messages . push ( msg ); 
         var  messages_html =  messages_template ({ 'messages' :  messages }); $ ( '#messages' ). html ( messages_html ); $ ( "#messages" ). animate ({  scrollTop :  $ ( '#messages' )[ 0 ]. scrollHeight },   1000 ); 
     } 

     var  conn =   new   WebSocket ( 'ws://localhost:8080' ); conn . onopen =   function ( e )   { console . log ( "Connection established!" ); 
     }; conn . onmessage =   function ( e )   { 
         var  msg =  JSON . parse ( e . data ); updateMessages ( msg ); 
     }; $ ( '#join-chat' ). click ( function (){ user =  $ ( '#user' ). val (); $ ( '#user-container' ). addClass ( 'hidden' ); $ ( '#main-container' ). removeClass ( 'hidden' ); 

         var  msg =   { 
             'user' :  user , 
             'text' :  user +   ' entered the room' , 
             'time' :  moment (). format ( 'hh:mm a' ) 
         }; updateMessages ( msg ); conn . send ( JSON . stringify ( msg )); $ ( '#user' ). val ( '' ); 
     }); $ ( '#send-msg' ). click ( function (){ 
         var  text =  $ ( '#msg' ). val (); 
         var  msg =   { 
             'user' :  user , 
             'text' :  text , 
             'time' :  moment (). format ( 'hh:mm a' ) 
         }; updateMessages ( msg ); conn . send ( JSON . stringify ( msg )); $ ( '#msg' ). val ( '' ); 
     }); $ ( '#leave-room' ). click ( function (){ 

         var  msg =   { 
             'user' :  user , 
             'text' :  user +   ' has left the room' , 
             'time' :  moment (). format ( 'hh:mm a' ) 
         }; updateMessages ( msg ); conn . send ( JSON . stringify ( msg )); $ ( '#messages' ). html ( '' ); messages =   []; $ ( '#main-container' ). addClass ( 'hidden' ); $ ( '#user-container' ). removeClass ( 'hidden' ); conn . close (); 
     }); 

 })(); 

Сломать файл JavaScript. Во-первых, мы оборачиваем все в немедленно вызванное выражение функции, чтобы быть уверенными, что включаемый код не будет взаимодействовать с любым другим JavaScript, который мы могли бы включить позже.

 ( function (){ 

 })(); 

Инициализируйте пользователя, сообщения и шаблон сообщений. Мы будем использовать переменную user для хранения имени пользователя, который вошел в чат. messages предназначена для хранения текущих отправленных сообщений, а messages_template — это шаблон руля, который мы будем использовать для построения HTML-кода, который показывает все сообщения.

 var  user ; 
 var  messages =   []; 

 var  messages_template =   Handlebars . compile ( $ ( '#messages-template' ). html ()); 

Затем мы создаем метод, который будет выполняться каждый раз, когда сообщение отправляется или получает конкретный пользователь. Что это делает, это помещает сообщение, переданное в качестве аргумента, в массив сообщений. Затем он создает HTML для сообщений, используя массив messages и messages_template . Затем он обновляет HTML-код контейнера сообщений. Наконец, мы прокручиваем вниз до конца контейнера сообщений, чтобы пользователь видел последнее сообщение.

 function  updateMessages ( msg ){ messages . push ( msg ); 
     var  messages_html =  messages_template ({ 'messages' :  messages }); $ ( '#messages' ). html ( messages_html ); $ ( "#messages" ). animate ({  scrollTop :  $ ( '#messages' )[ 0 ]. scrollHeight },   1000 ); 
 } 

Затем мы создаем новое соединение WebSocket. Он принимает URL-адрес сервера WebSocket в качестве аргумента. В этом случае мы подключаемся к ws://localhost:8080 который является сервером, который мы запускали ранее из терминала.

 var  conn =   new   WebSocket ( 'ws://localhost:8080' ); 

После этого мы прослушиваем событие onopen в созданном нами соединении WebSocket. Это на самом деле не имеет ничего общего, мы просто используем его, чтобы проверить, успешно ли мы подключились к серверу.

 conn . onopen =   function ( e )   { console . log ( "Connection established!" ); 
 }; 

Далее мы слушаем событие onmessage . Это срабатывает каждый раз, когда новое сообщение отправляется с любого из подключенных клиентов. Когда это событие происходит, мы используем метод JSON.parse для преобразования строки JSON, полученной с сервера, в объект JavaScript. Затем мы вызываем метод updateMessages и передаем результат.

 conn . onmessage =   function ( e )   { 
     var  msg =  JSON . parse ( e . data ); updateMessages ( msg ); 
 }; 

Присоединение к чату

Присоединение к чату происходит, когда пользователь нажимает кнопку «присоединиться к чату». Для этого присваивается значение, введенное пользователем в поле имени пользователя, в переменную пользователя. Затем он скрывает пользовательский контейнер, который содержит поле имени пользователя, и показывает основной контейнер, который содержит сообщения, и поле для ввода нового сообщения. После этого мы создаем новый объект сообщения. Объект сообщения имеет свойства user , text и time . Затем мы вызываем метод updateMessages чтобы сообщение updateMessages в окно сообщений. Затем мы вызываем метод send для соединения WebSocket и передаем строковое представление JSON нового сообщения. Наконец, мы очищаем поле имени пользователя.

 $ ( '#join-chat' ). click ( function (){ user =  $ ( '#user' ). val (); $ ( '#user-container' ). addClass ( 'hidden' ); $ ( '#main-container' ). removeClass ( 'hidden' ); 

     var  msg =   { 
         'user' :  user , 
         'text' :  user +   ' entered the room' , 
         'time' :  moment (). format ( 'hh:mm a' ) 
     }; updateMessages ( msg ); conn . send ( JSON . stringify ( msg )); $ ( '#user' ). val ( '' ); 
 }); 

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

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

 $ ( '#send-msg' ). click ( function (){ 
     var  text =  $ ( '#msg' ). val (); 
     var  msg =   { 
         'user' :  user , 
         'text' :  text , 
         'time' :  moment (). format ( 'hh:mm a' ) 
     }; updateMessages ( msg ); conn . send ( JSON . stringify ( msg )); $ ( '#msg' ). val ( '' ); 
 }); 

Выход из комнаты чата

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

 $ ( '#leave-room' ). click ( function (){ 

     var  msg =   { 
         'user' :  user , 
         'text' :  user +   ' has left the room' , 
         'time' :  moment (). format ( 'hh:mm a' ) 
     }; updateMessages ( msg ); conn . send ( JSON . stringify ( msg )); $ ( '#messages' ). html ( '' ); messages =   []; $ ( '#main-container' ). addClass ( 'hidden' ); $ ( '#user-container' ). removeClass ( 'hidden' ); 

 }); 

Вывод

В этом руководстве мы создали простое приложение для чата, использующее возможности реального времени, предоставляемые WebSockets через Ratchet. Файлы, используемые для этого урока, доступны в этом репозитории Github .

Вопросов? Комментарии? Оставь их ниже!