Forem: tnguyen303

Journey to a Full Stack Developer - ep. 3 - Setup Socket.io part 2

tnguyen303 — Tue, 27 Nov 2018 23:56:18 +0000

This week, we're going to pick up from last week post about how to integrate Socket.io package in your Node application. Socket.io is a package that allows pushing data to specific or all users who are interacting with the application, in real time, such as a chat application, a Facebook UI where you see real-time notifications.

Continuing from my last episode, we currently have the server file completely set up:

const express = require("express");
const app = express();
//http package lets you run server without Express, socket.io requires more control that is provided with this package
const server = require("http").createServer(app);
const io = require("socket.io")(server);

require("./sockets/message-sockets")(io);

This is our front-end javascript code that gets run by the html file, it contains a function that sends a chat message to our database via a POST route (the ajax call) AND additionally send that same message to our socket "listener" file that handles real-time data:

const sendMessage = function(event) {
  const message = $("#message").val();
  event.preventDefault();
    //prepare our data to be sent across your application
    const newMessage = {
      message: message,
      sender: sender,
      recipient: recipient
    };
    //send to server, calling new-message to reference in message-sockets.js
    $.ajax({
      url: `/api/chat/${sender}/${recipient}`,
      method: "POST",
      data: newMessage
    });
    //this is the magic sauce, socket.emit sends data to our server which then gets redirected by the message-sockets.js file to other people's browser. The tag is "new-message" and this must match the receiving socket.on in your message-sockets.js file.
    socket.emit("new-message", newMessage);
};

As you can tell, we are calling a "message-sockets" file to be used by the Socket.io package. This is a JavaScript file that will hold the server-side "handling" of the real-time data:

//this is message-sockets.js file in sockets subfolder
module.exports = function(io) {
  console.log("running");
  //this .on listener runs every time a user connects
  io.on("connection", function(socket) {
    //SOCKET ROUTES:

    // push to all sockets, can be used to notify users of a New Version Update is available
    socket.on("new-message-to-all", function(data) {
      io.emit('emit-message-to-all',data);
    });

    //push to specific (private) sockets, can be used to send private info such as messages to a user or group
    socket.on("new-message", function(data){
      const socket1 = users[data.sender];
      const socket2 = users[data.recipient];
      socket1.emit('emit-message', data);
      socket2.emit('emit-message', data);
    });

  });
};

After the server has redirected our new-message data, the front-end code must have a function to listen for this new data, now called "emit-message" and render it to the targeted users:

//this is my client-side javascript file that runs when my html runs
//display message on private sockets
socket.on("emit-message", function(data) {
  //this is a simple function to render a new message to the website
  renderMessageList(data);
});

It looks complicated and long but the whole code can be summarized as, In socket.io, we have three steps to send real-time data:

Emit - this is just a notice that tells the server there is new data, along with the new data and a tag
On (server-side) - this is basically an event listener that listens for the specific "Emit" tag, then performs an Emit back to the client-side to targeted "sockets" or users.
On (client-side) - this, again, is just a listener for the redirected data, in step 2, and perform a function, usually a simple function that display this data to the client's browser.

Next week I'm going to share what I have learned in testing with you. Hopefully this has been an informative how-to and I will be glad to know I had helped someone in need!

Journey to a Full Stack Developer - ep. 2

tnguyen303 — Fri, 16 Nov 2018 01:31:55 +0000

This week, we learned about how to make an application that talks in real time. The technology used here is called socket.io. It is widely used by Facebook, Instagram, Youtube, Google Docs. All these websites (or applications) have real time updates that pop up. This may seem as if it is built in but actually, there are some coding and a package that have to be installed in order to make it function this way.

Socket.io has to be run on your the server (back end). Socket.io does not interact directly to your database, such as Mongo or mySQL, it is rather a way to pass and render data to the front-end. As such all your ajax calls are still required.

To set up to use socket.io, in your js server file, make sure you have:

const express = require("express");
const app = express();
//http package lets you run server without Express, socket.io requires more control that is provided with this package
const server = require("http").createServer(app);
const io = require("socket.io")(server);


require("./sockets/todolist-sockets")(io);

As you can see, all we added is 2 lines to set it up. In socket.io, we have two main commands:

Emit - this is just a notice that tells the server there is new data, along with the new data
On - this is basically an event listener that listens for the specific "Emit", then performs a script, it will often be to render the new data to the user.

Next week we will cover the code fully so you can implement it in your app. As always, please let me know any comments I will be glad to discuss with you.

Journey to a Full Stack Developer - ep. 1

tnguyen303 — Thu, 08 Nov 2018 04:54:31 +0000

Life, as they say, is a journey and a journey usually comes with unplanned, unexpected events. My life took a turn when I decided to take a coding boot camp, in opposition from my CS friend. One of the arguments from my friend was that the cost is not justified given the materials can be found online, for free. Being a good friend that I am, I listened and made up my mind... That is to keep going ahead with the boot camp and shelling out much of my savings.

The boot camp is taught by some of the most talented developers who will make you feel right at home. Though most of the time it does feel like watching Jeopardy and submerge yourself in answering the questions. After each class session, most of us are tired and I, personally, feel mostly confused of what just went on. I think my professor once mentioned javascript overload, which I mostly feel about coming out of each class.

My ultimate goal out of this boot camp is to run my own e commerce store. I know people may say, why do you need coding when you can get started very easily with a self hosted platform such as Shopify. Even with Shopify, where it's mostly built and templated for you to get a quick start, to stay competitive, websites will most of the time have a 3rd-party service to expand their out-of-the-box functionalities.

I'm grateful to have known many of classmates, teachers and TAs. Looking back at it, it now makes more sense to me why the coding community have so many open source projects because for many of us, it's a life style.

How to find word in string in mLab and MongoDB

tnguyen303 — Thu, 01 Nov 2018 06:06:44 +0000

If you are new to programming, you may not know what indexing is. It's actually everywhere around you, if a website has a database, it probably has indexing of some type enabled.

Let me present indexing! Indexing is a process that is run on a database in order to look for things more efficiently, much more efficiently! It does this by looking through all of the database and map the desired fields. Then these new "values/link pairs" are sorted in alphanumeric order. When you hit a keyword, it will go through this ordered list of mapped values and quickly look for your query (Google Big O notation for more details).

Now to the actual code that makes this work:

Example: We want to search for a word in fields "itemName" and "itemDescription" in our MongoDB database. There are other fields defined in our schema but you should not index more than you need as it will create redundant values/links and that would impact your database's query speed. We will use $text notation to look for word(s) in our indexed fields.

First, we have to have a function to run the $text query:

const Inventory = require("./../models/inventory");

const queryResult = function(searchQuery) {
  Inventory.find({ $text: { $search: searchQuery } });
};

console.log(queryResult("shoes"));

Then, we have to our to our mLab/MongoDB database management, requires login (either through Heroku or mLab), select your collection > Indexes tab > Add Index:

Fill out the desired fields to index, in our case, we are indexing "itemName" and "itemDescription" fields in our database collection; "text" is required to enable the $text notation.

Finally, hit Create in Background, you will get a popup prompting it may take a few minutes to several hours, depending on the size of your database and number of indexing fields.

That's it! Your site is still operational but until the indexing operation is still going on, you may notice performance issue, so best is to wait.

Thank you for reading my first post, let me know any questions/input/comments!