This is a project inspired by Coursera's Web Application Development with Javascript and MongoDB course.
Minstantly is an instant messaging app built with Meteor and Coursera's starter code. While it satisfies the requirements for Coursera, I made sweeping modifications to how the app feels and looks. :)
Adapt the templates and helper functions so that the messaging window displays users’ avatars next to their messages. Feel free to add other enhancements!
- Thank heavens for
object-fit: cover
in CSS to center and crop images!
Remove the insecure package from the application and implement a Meteor method to allow the insertion of chat items in the Chats collection. Test that you cannot insert items directly any more.
Make sure methods have no explicit access to client specific variables - i.e. Session
or event
.
Remove the autopublish package from the application and implement publish and subscribe for Chats. Users should only be able to retrieve chats that have their user id in either the user1Id field or the user2Id field. Test by logging in as different users and checking what you can see.
- Remember to publish the
Meteor.users
collection or else the homepage does not list all the Minstantly users. - Sometimes when refreshing a chat page between two users, both will end up in a new chat session. To fix this, wait for the subscription to be ready at the route before checking for any preexisting chat sessions.
- An extension to the point above, I ran into a problem where inserting a new chat into the
Chats
collection failed. This is because noChats.allow
was not defined forinsert
on the server-side. Remember to add this in for currently logged-in users in Minstantly. - To ensure users only retrieve chats with their userId in either
user1Id
oruser2Id
, add an extra condition in the/chat/:_id
route to bring non-users back to the root.
Can you implement emoticon functionality which allows the user to insert graphical emoticons into their message? Emoticons are small icons such as smiley faces which are typical of this kind of application.
Use the mattimo:emoticons package.
Refactored the application into a hierarchical structure.
When creating the chat page, I wanted to correspond the height of the chat window to the viewport height vh
. While I was able to keep all the content within the height of the window, a problem I encountered was being able to scroll new div
s automatically when a user enters a new message. My solution follows this stackoverflow approach. Specifically, I computed the different in offsets between the first and last message and then make the chat window scroll to that position.
Template.chat_page.rendered = function() {
$('.js-send-chat').on('submit', function() {
var $firstMessageOffset = $(".chat_message_row:first").offset();
if ($firstMessageOffset) {
var scrollOffset = $(".chat_message_row:last").offset().top -
$firstMessageOffset.top;
$(".chat_page-chat_window").animate({ scrollTop: scrollOffset }, '1000');
}
else { // no message so no need to scroll
return;
}
});
}
As a last step, I added SSL for security purposes. I opted to do a basic deployment on meteor.com
by running the command
meteor add force-ssl # for enabling SSL security
meteor deploy minstantly.meteor.com