Создание приложения для чата в реальном времени с Sails.js

Позвольте мне объяснить поток нашего клиентского JavaScript-кода:

1. loadUsers() . Когда страница загружается впервые, мы используем библиотеку сокетов Sails.js для выполнения запроса GET для пользователей. Этот запрос будет обработан Blueprint API. Затем мы передаем полученные данные в renderChatUsers(data) .
2. В функции loadUsers() мы регистрируем слушателя с io.socket.on функции io.socket.on . Мы слушаем события, относящиеся к user модели. Когда мы получаем уведомление, мы снова выбираем пользователей и заменяем существующий вывод HTML.
3. renderChatUsers(data) . Здесь мы получаем скрипт с идентификатором usersTemplate с помощью функции jQuery templates() . Обратите внимание на тип text/x-jsrender . Указав пользовательский тип, браузер будет игнорировать и пропускать этот раздел, поскольку он не знает, что это такое. Затем мы используем функцию template.render() для объединения шаблона с данными. Этот процесс сгенерирует вывод HTML, который мы затем возьмем и вставим в документ HTML.

Шаблон, который мы написали в profile.ejs был обработан на сервере Node, а затем отправлен в браузер в формате HTML. Для chat-users нам нужно выполнить рендеринг на стороне клиента. Это позволит пользователям чата видеть новых пользователей, присоединяющихся к группе, без обновления своего браузера.

Прежде чем мы протестируем код, нам нужно обновить views/chatroom.ejs чтобы включить только что созданную часть chat-users . Замените [ TODO chat-users ] на этот код:

 ...html <% include partials/chat-users.ejs %> ... 

В том же файле добавьте этот скрипт в конце:

 <script type="text/javascript"> window.onload = function() { loadUsers(); } </script> 

Этот скрипт вызовет loadUsers() . Чтобы убедиться, что это работает, давайте выполним sails lift и перейдем к URL /chat .

Ваше мнение должно понравиться, как на картинке выше. Если это произойдет, давайте приступим к созданию API чата.

ChatMessage API

Как и прежде, мы будем использовать Sails.js для генерации API:

 sails generate api ChatMessage 

Далее, заполните api/models/ChatMessage.js этими атрибутами:

 module.exports = { attributes: { message: { type: 'string', required: true }, createdBy : { model: 'user', required: true } } }; 

Обратите внимание, что мы объявили взаимно-однозначную связь с моделью User через атрибут createdBy . Далее нам нужно заполнить нашу дисковую базу несколькими сообщениями чата. Для этого мы будем использовать config/bootstrap.js . Обновите весь код следующим образом. Мы используем синтаксис async/await чтобы упростить наш код и избежать ада обратного вызова:

 module.exports.bootstrap = async function(cb) { sails.config.appName = "Sails Chat App"; // Generate Chat Messages try { let messageCount = ChatMessage.count(); if(messageCount > 0){ return; // don't repeat messages } let users = await User.find(); if(users.length >= 3) { console.log("Generating messages...") let msg1 = await ChatMessage.create({ message: 'Hey Everyone! Welcome to the community!', createdBy: users[1] }); console.log("Created Chat Message: " + msg1.id); let msg2 = await ChatMessage.create({ message: "How's it going?", createdBy: users[2] }); console.log("Created Chat Message: " + msg2.id); let msg3 = await ChatMessage.create({ message: 'Super excited!', createdBy: users[0] }); console.log("Created Chat Message: " + msg3.id); } else { console.log('skipping message generation'); } }catch(err){ console.error(err); } // It's very important to trigger this callback method when you're finished with Bootstrap! (Otherwise your server will never lift, since it's waiting on Bootstrap) cb(); }; 

Самое замечательное, что генератор семян запускается до bootstrap.js . Таким образом, мы уверены, что данные о Users были созданы первыми, чтобы мы могли использовать их для заполнения поля createdBy . Наличие тестовых данных позволит нам быстро выполнять итерации при создании пользовательского интерфейса.

Пользовательский интерфейс сообщений чата

Идите дальше и создайте новый файл views/partials/chat-messages.ejs , затем разместите этот код:

 <div class="ui basic segment" style="height: 70vh;"> <h3>Community Conversations</h3> <hr> <div id="chat-content" class="ui feed"> </div> </div> <script id="chatTemplate" type="text/x-jsrender"> <div class="event"> <div class="label"> <img src="{{:createdBy.avatar}}"> </div> <div class="content"> <div class="summary"> <a href="#"> {{:createdBy.name}}</a> posted on <div class="date"> {{:createdAt}} </div> </div> <div class="extra text"> {{:message}} </div> </div> </div> </script> <script type="text/javascript"> function loadMessages() { // Load existing chat messages io.socket.get('/chatMessage', function(messages, response) { renderChatMessages(messages); }); // Listen for new chat messages io.socket.on('chatmessage', function(body) { renderChatMessages(body.data); }); } function renderChatMessages(data) { const chatContent = $('#chat-content'); const template = $.templates('#chatTemplate'); let htmlOutput = template.render(data); chatContent.append(htmlOutput); // automatically scroll downwards const scrollHeight = chatContent.prop("scrollHeight"); chatContent.animate({ scrollTop: scrollHeight }, "slow"); } </script> 

Логика здесь очень похожа на chat-users . В разделе прослушивания есть одно ключевое отличие. Вместо того, чтобы заменить вывод, мы используем append. Затем мы делаем анимацию прокрутки внизу списка, чтобы пользователи увидели новое входящее сообщение.

 ... <!-- Chat Messages --> <% include partials/chat-messages.ejs %> ... <script type="text/javascript"> ... loadMessages(); ... </script> 

 <div class="ui basic segment"> <div class="ui form"> <div class="ui field"> <label>Post Message</label> <textarea id="post-field" rows="2"></textarea> </div> <button id="post-btn" class="ui right floated large orange button" type="submit">Post</button> </div> <div id="post-err" class="ui tiny compact negative message" style="display:none;"> <p>Oops! Something went wrong.</p> </div> </div> 

 <script type="text/javascript"> function activateChat() { const postField = $('#post-field'); const postButton = $('#post-btn'); const postErr = $('#post-err'); // Bind to click event postButton.click(postMessage); // Bind to enter key event postField.keypress(function(e) { var keycode = (e.keyCode ? e.keyCode : e.which); if (keycode == '13') { postMessage(); } }); function postMessage() { if(postField.val() == "") { alert("Please type a message!"); } else { let text = postField.val(); io.socket.post('/postMessage', { message: text }, function(resData, jwRes) { if(jwRes.statusCode != 200) { postErr.html("<p>" + resData.message +"</p>") postErr.show(); } else { postField.val(''); // clear input field } }); } } } </script> 

 module.exports = { postMessage: async (request, response) => { // Make sure this is a socket request (not traditional HTTP) if (!request.isSocket) { return response.badRequest(); } try { let user = await User.findOne({email:'[email protected]'}); let msg = await ChatMessage.create({message:request.body.message, createdBy:user }); if(!msg.id) { throw new Error('Message processing failed!'); } msg.createdBy = user; ChatMessage.publishCreate(msg); } catch(err) { return response.serverError(err); } return response.ok(); } }; 

 ... '/chat': { view: 'chatroom' }, // Add comma here '/postMessage': { controller: 'ChatMessageController', action: 'postMessage' } ... 

 ... <% include partials/chat-messages.ejs %> ... <script type="text/javascript"> ... activateChat(); ... </script> 

 <form method="post" action="/auth/authenticate" class="ui form"> <div class="field"> <label>Full Names</label> <input type="text" name="name" placeholder="Full Names" value="<%= typeof name != 'undefined' ? name : '' %>"> </div> <div class="required field"> <label>Email</label> <input type="email" name="email" placeholder="Email" value="<%= typeof email != 'undefined' ? email : '' %>"> </div> <button class="ui teal button" type="submit" name="action" value="signup">Sign Up &amp; Login</button> <button class="ui blue button" type="submit" name="action" value="login">Login</button> <p class="note">*Provide email only for Login</p> </form> <% if(typeof error != 'undefined') { %> <div class="ui error message"> <div class="header"><%= error.title %></div> <p><%= error.message %></p> </div> <% } %> 

 ... <% include partials/auth-form.ejs %> ... 

 ChatMessageController: { '*': 'sessionAuth' }, UserController: { '*': 'sessionAuth' }, 

 ... render: (request, response) => { return response.view('chatroom'); }, 

 ... '/chat': { controller: 'ChatMessageController', action: 'render' }, ... 

 ... // return res.forbidden('You are not permitted to perform this action.'); return res.redirect('/'); ... 

 sails generate controller Auth 

 authenticate: async (request, response) => { // Sign up user if(request.body.action == 'signup') { // Validate signup form // Check if email is registered // Create new user } // Log in user }, logout: (request, response) => { // Logout user } 

 /** * AuthService.js * **/ const gravatar = require('gravatar') // Where to display auth errors const view = 'homepage'; module.exports = { sendAuthError: (response, title, message, options) => { options = options || {}; const { email, name} = options; response.view(view, { error: {title, message}, email, name }); return false; }, validateSignupForm: (request, response) => { if(request.body.name == '') { return AuthService.sendAuthError(response, 'Signup Failed!', "You must provide a name to sign up", {email:request.body.email}); } else if(request.body.email == '') { return AuthService.sendAuthError(response, 'Signup Failed!', "You must provide an email address to sign up", {name:request.body.name}); } return true; }, checkDuplicateRegistration: async (request, response) => { try { let existingUser = await User.findOne({email:request.body.email}); if(existingUser) { const options = {email:request.body.email, name:request.body.name}; return AuthService.sendAuthError(response, 'Duplicate Registration!', "The email provided has already been registered", options); } return true; } catch (err) { response.serverError(err); return false; } }, registerUser: async (data, response) => { try { const {name, email} = data; const avatar = gravatar.url(email, {s:200}, "https"); let newUser = await User.create({name, email, avatar}); // Let all sockets know a new user has been created User.publishCreate(newUser); return newUser; } catch (err) { response.serverError(err); return false; } }, login: async (request, response) => { try { let user = await User.findOne({email:request.body.email}); if(user) { // Login Passed request.session.userId = user.id; request.session.authenticated = true; return response.redirect('/chat'); } else { // Login Failed return AuthService.sendAuthError(response, 'Login Failed!', "The email provided is not registered", {email:request.body.email}); } } catch (err) { return response.serverError(err); } }, logout: (request, response) => { request.session.userId = null; request.session.authenticated = false; response.redirect('/'); } } 

 module.exports = { authenticate: async (request, response) => { const email = request.body.email; if(request.body.action == 'signup') { const name = request.body.name; // Validate signup form if(!AuthService.validateSignupForm(request, response)) { return; } // Check if email is registered const duplicateFound = await AuthService.checkDuplicateRegistration(request, response); if(!duplicateFound) { return; } // Create new user const newUser = await AuthService.registerUser({name,email}, response); if(!newUser) { return; } } // Attempt to log in const success = await AuthService.login(request, response); }, logout: (request, response) => { AuthService.logout(request, response); } }; 

 ... let user = await User.findOne({id:request.session.userId}); ...