10. Adding Real-time Chat | Node.js By Example

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Node.js By Example

By : Krasimir Tsonev

3.5 (2)

Node.js By Example

3.5 (2)

By: Krasimir Tsonev

Overview of this book

If you are a JavaScript developer with no experience with Node.js or server-side web development, this book is for you. It will lead you through creating a fairly complex social network. You will learn how to work with a database and create real-time communication channels.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Node.js Fundamentals

1. Node.js Fundamentals

Understanding the Node.js architecture

Installing Node.js

Defining and using modules

Managing and distributing packages

Introducing built-in modules

Summary

2. Architecting the Project

2. Architecting the Project

Introducing the basic layers of the application

The task runner and building system

Discovering Gulp

Test-driven development

The Model-View-Controller pattern

Introducing the REST API concept

Summary

3. Managing Assets

3. Managing Assets

Serving files with Node.js

CSS preprocessing

Packing client-side JavaScript

Delivering HTML templates

Summary

4. Developing the Model-View-Controller Layers

4. Developing the Model-View-Controller Layers

Evolving the current setup

Implementing the router

Introducing Ractive.js

Constructing the entry point of the application

Defining a controller

Managing our views

Creating a model

Summary

5. Managing Users

5. Managing Users

Working with the MongoDB database

Extending the code from the previous chapter

Registering a new user

User authentication with sessions

Managing a user's profile

Summary

6. Adding Friendship Capabilities

6. Adding Friendship Capabilities

Finding friends

Marking users as friends

Displaying the linked users on the Profile page

Summary

7. Posting Content

7. Posting Content

Posting and storing text

Showing the user's feed

Posting files

Summary

8. Creating Pages and Events

8. Creating Pages and Events

Refactoring the API

Adding a form to create pages

Creating a record in the database

Showing the currently added pages

Showing a specific page

Posting a comment to a page

Showing the comments

Managing events attached to a particular page

Summary

9. Tagging, Sharing, and Liking

9. Tagging, Sharing, and Liking

Selecting friends and sending their IDs to the backend

Storing the tagged users and displaying them in the user's feed

Liking posts and counting the number of likes

Showing the number of likes

Summary

10. Adding Real-time Chat

10. Adding Real-time Chat

Getting to know WebSockets

Bringing Socket.IO to the project

Preparing the UI of the chat area

Exchanging messages between the client and the server

Sending messages to the user's friends only

Customizing the output of the chat

Summary

11. Testing the User Interface

11. Testing the User Interface

Introducing the basic testing toolset

Preparing our project to run tests

Running our test with PhantomJS

Testing user registration

Testing with DalekJS

Summary

Index

Index

Customer Reviews

3.5 (2)

5 star

50%

4 star

0%

3 star

0%

2 star

50%

1 star

0%

Exchanging messages between the client and the server

We are ready to write some working Socket.IO code. So far, we placed code snippets that only proved that the socket connection works. For example, the code that was added to frontend/js/app.js should be moved to frontend/js/controllers/Chat.js, which is the controller responsible for the chat page. Because it acts as a base for this real-time feature, we will start from there. Let's add a couple of local variables to the component, as follows:

data: {
  messages: ['Loading. Please wait.'],
  output: '',
  socketConnected: false
}

These variables have default values, and they are available in the component's template. The first one, messages, will keep all the messages that come from the users in the chat, including the current user. The output variable is used to populate the message container on the screen. The last one, socketConnected, controls the visibility of the text field and the button. If it is set to false, the controls will...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Node.js By Example

Search

Your notes and bookmarks