├── .meteor
├── .gitignore
├── release
├── platforms
├── .id
├── .finished-upgraders
├── packages
└── versions
├── .gitignore
├── public
├── tada.png
└── question-white.svg
├── server
└── main.js
├── api
├── collections.js
└── server
│ ├── publications.js
│ └── methods.js
├── package.json
├── client
├── message.html
├── message.js
├── loader.html
├── main.html
├── main.js
└── main.css
├── LICENSE
└── README.md
/.meteor/.gitignore:
--------------------------------------------------------------------------------
1 | local
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .deploy/
--------------------------------------------------------------------------------
/.meteor/release:
--------------------------------------------------------------------------------
1 | METEOR@1.6.1.1
2 |
--------------------------------------------------------------------------------
/.meteor/platforms:
--------------------------------------------------------------------------------
1 | server
2 | browser
3 |
--------------------------------------------------------------------------------
/public/tada.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeSignal/meteor-live-chat/master/public/tada.png
--------------------------------------------------------------------------------
/server/main.js:
--------------------------------------------------------------------------------
1 | import { Meteor } from 'meteor/meteor';
2 |
3 | Meteor.startup(() => {
4 | // code to run on server at startup
5 | });
6 |
--------------------------------------------------------------------------------
/api/collections.js:
--------------------------------------------------------------------------------
1 | import { Mongo } from 'meteor/mongo';
2 |
3 | //declare the Mongo collections to use
4 |
5 | export const Messages = new Mongo.Collection('messages');
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "live-chat",
3 | "private": true,
4 | "scripts": {
5 | "start": "meteor run"
6 | },
7 | "dependencies": {
8 | "@babel/runtime": "^7.0.0-beta.42",
9 | "meteor-node-stubs": "^0.3.2",
10 | "moment": "^2.22.0"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/api/server/publications.js:
--------------------------------------------------------------------------------
1 | import { Meteor } from 'meteor/meteor';
2 | import { Messages } from '../collections.js';
3 |
4 | Meteor.publish("messages", function() {
5 | return Messages.find({}, { fields: { name: 1, message: 1, createdAt: 1, announcement: 1 }, limit: 100, sort: { createdAt: -1 } }); //we want the 100 most recent messages
6 | });
--------------------------------------------------------------------------------
/.meteor/.id:
--------------------------------------------------------------------------------
1 | # This file contains a token that is unique to your project.
2 | # Check it into your repository along with the rest of this directory.
3 | # It can be used for purposes such as:
4 | # - ensuring you don't accidentally deploy one app on top of another
5 | # - providing package authors with aggregated statistics
6 |
7 | o2iybehd9kb4.fhcarzk2x079
8 |
--------------------------------------------------------------------------------
/client/message.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
{{name}} {{timestamp}}
5 |
{{message}}{{#if announcement}} {{/if}}
6 |
7 |
8 |
--------------------------------------------------------------------------------
/client/message.js:
--------------------------------------------------------------------------------
1 | import { Template } from 'meteor/templating';
2 | import moment from 'moment';
3 | import './message.html';
4 |
5 | Template.message.helpers({
6 |
7 | timestamp() {
8 | const sentTime = moment(this.createdAt);
9 | //if today, just show time, else if some other day, show date and time
10 | if (sentTime.isSame(new Date(), "day")) {
11 | return sentTime.format("h:mm a");
12 | }
13 | return sentTime.format("M/D/YY h:mm a");
14 | }
15 |
16 | });
--------------------------------------------------------------------------------
/client/loader.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
--------------------------------------------------------------------------------
/public/question-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.meteor/.finished-upgraders:
--------------------------------------------------------------------------------
1 | # This file contains information which helps Meteor properly upgrade your
2 | # app when you run 'meteor update'. You should check it into version control
3 | # with your project.
4 |
5 | notices-for-0.9.0
6 | notices-for-0.9.1
7 | 0.9.4-platform-file
8 | notices-for-facebook-graph-api-2
9 | 1.2.0-standard-minifiers-package
10 | 1.2.0-meteor-platform-split
11 | 1.2.0-cordova-changes
12 | 1.2.0-breaking-changes
13 | 1.3.0-split-minifiers-package
14 | 1.4.0-remove-old-dev-bundle-link
15 | 1.4.1-add-shell-server-package
16 | 1.4.3-split-account-service-packages
17 | 1.5-add-dynamic-import-package
18 |
--------------------------------------------------------------------------------
/.meteor/packages:
--------------------------------------------------------------------------------
1 | # Meteor packages used by this project, one per line.
2 | # Check this file (and the other files in this directory) into your repository.
3 | #
4 | # 'meteor add' and 'meteor remove' will edit this file for you,
5 | # but you can also edit it by hand.
6 |
7 | meteor-base@1.3.0 # Packages every Meteor app needs to have
8 | mobile-experience@1.0.5 # Packages for a great mobile UX
9 | mongo@1.4.2 # The database Meteor supports right now
10 | blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
11 | reactive-var@1.0.11 # Reactive variable for tracker
12 | tracker@1.1.3 # Meteor's client-side reactive programming library
13 |
14 | standard-minifier-css@1.4.0 # CSS minifier run for production mode
15 | standard-minifier-js@2.3.1 # JS minifier run for production mode
16 | es5-shim@4.7.0 # ECMAScript 5 compatibility for older browsers
17 | ecmascript@0.10.6 # Enable ECMAScript2015+ syntax in app code
18 | shell-server@0.3.1 # Server-side component of the `meteor shell` command
19 |
20 | mrt:cookies
21 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Pitchly
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/api/server/methods.js:
--------------------------------------------------------------------------------
1 | import { Meteor } from 'meteor/meteor';
2 | import { check, Match } from 'meteor/check';
3 |
4 | import { Messages } from '../collections.js';
5 |
6 | Meteor.methods({
7 |
8 | 'sendMessage'(data) {
9 |
10 | check(data, {
11 | message: String, //the message to send
12 | name: Match.Optional(String) //if the user already has a name
13 | });
14 |
15 | if (data.message=="") {
16 | throw new Meteor.Error("message-empty", "Your message is empty");
17 | }
18 |
19 | let userName = (data.name && data.name!="") ? data.name : "Anonymous";
20 |
21 | const matchName = data.message.match(/^My name is (.*)/i);
22 |
23 | if (matchName && matchName[1]!="") {
24 | userName = matchName[1];
25 | Messages.insert({
26 | name: "Chat Bot",
27 | message: "Hey everyone, " + userName + " is here!",
28 | createdAt: new Date(),
29 | announcement: true
30 | });
31 | } else {
32 | Messages.insert({
33 | name: userName,
34 | message: data.message,
35 | createdAt: new Date()
36 | });
37 | }
38 |
39 | return {
40 | name: userName
41 | };
42 |
43 | }
44 |
45 | });
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Live Chat with Meteor!
2 | A simple live chat app written in Meteor
3 |
4 | See the [live demo](http://chat.pitchly.net/). Just be nice!
5 |
6 | ## How to Run
7 | Clone this repo. If you don't already have Meteor, see https://www.meteor.com/install or just run:
8 |
9 | ```
10 | curl https://install.meteor.com/ | sh
11 | ```
12 |
13 | Then in your project directory, run:
14 |
15 | ```
16 | meteor npm install
17 | meteor
18 | ```
19 |
20 | Open up http://localhost:3000/ and see the result. Trying opening in two different windows!
21 |
22 | ---
23 |
24 | This app was largely made in just two hours, styling aside, and shows the power of Meteor and its real-time capabilities. This sample app covers a few key principles:
25 |
26 | - How to use Blaze Templates
27 | - How to publish/subscribe to data from the server
28 | - How to call methods on the server
29 | - How to insert data into MongoDB
30 | - How to deal with data reactively
31 | - How to use Meteor helpers
32 | - How to use Meteor events
33 | - How to import Meteor and NPM third-party packages
34 | - Basic backend validation using Meteor check
35 | - Restricting data access with Meteor.publish
36 |
37 | Extra: In this app, we also deal with
38 |
39 | - Dates using the moment.js NPM package
40 | - Cookies using the Meteor mrt:cookies package
41 |
42 | What this app does not cover:
43 |
44 | - Saving local state (aside from cookies)
45 | - Login or auth flows
46 |
--------------------------------------------------------------------------------
/client/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Welcome to Live Chat with Meteor!
5 |
6 |
7 |
8 |
9 |
10 |
11 |
Hint
12 |
You can send messages anonymously or tell us your name. To set your name, just send a message saying "My name is _____" and we'll introduce you!
{{/if}}