Chat feature with Socket.IO and MEAN stack

[BrownZeus]

Hi all,

I'm trying to create a chat app to add as a feature for a school project but I'm not very familiar with JS.

 

Can anyone give me a set of instructions on what to do or point me to an updated tutorial? Every tutorial I found doesn't use JS ES6 and they use older versions of the MEAN stack components.

 

I DO NOT WANT code, just a concsice set of instructions on what to do, what packages to install for node, etc. I get the basic gist of setting up a server using Express i think(?) but no idea how to integrate socket, connect the front end to the backend, and setting up and using a database to save everything.

 

Any help is appreciated. Again, no code, just instructions, I just wanna be pointed in the right direction.

[fringie]

You don't need anything unique to ES6 though? Even then ES6 and ES5 has the same functionality but ES6 is an improved version of the standard (so usually you target ES5 for browser compatibility as it goes all the back to IE11). Unfortunately, I can't remember the plugins that are good for this but Express is good like you were saying. In regards to socket.io here's a bit of info below. 

You'll want Gulp or that other popular one I forget the name of, to manage your tasks in node.js i.e. you'll need to turn on your server (it's like pressing the run/play button in an IDE). To do that you'll want to make a task that tells node.js where your entry method is (your starter method for where you put your code in).

 

Break down the task that you need to do. For example let's say you want to use MongoDB to store all the messages sent because it's fast and is stored in json which is perfect for your use case. First thing to say to yourself is I need to connect MongoDB to my node.js server I've made because how can I use it if it doesn't exist. I should follow the tutorial on https://www.w3schools.com/nodejs/nodejs_mongodb.asp (side note: I haven't actually read that guide) then think what your next step is. If you can't figure what your next step you need to break it down further.

 

Side note: You've picked up an interesting STACK of technologies to use. Sure, they are great but it might be a big learning curve if you don't have much knowledge in the frameworks. 

 

Just some general advice, hope it helps.

[BrownZeus]

3 minutes ago, fringie said:

You don't need anything unique to ES6 though? Even then ES6 and ES5 has the same functionality but ES6 is an improved version of the standard (so usually you target ES5 for browser compatibility as it goes all the back to IE11). Unfortunately, I can't remember the plugins that are good for this but Express is good like you were saying. In regards to socket.io here's a bit of info below. 

You'll want Gulp or that other popular one I forget the name of, to manage your tasks in node.js i.e. you'll need to turn on your server (it's like pressing the run/play button in an IDE). To do that you'll want to make a task that tells node.js where your entry method is (your starter method for where you put your code in).

 

Break down the task that you need to do. For example let's say you want to use MongoDB to store all the messages sent because it's fast and is stored in json which is perfect for your use case. First thing to say to yourself is I need to connect MongoDB to my node.js server I've made because how can I use it if it doesn't exist. I should follow the tutorial on https://www.w3schools.com/nodejs/nodejs_mongodb.asp (side note: I haven't actually read that guide) then think what your next step is. If you can't figure what your next step you need to break it down further.

 

Side note: You've picked up an interesting STACK of technologies to use. Sure, they are great but it might be a big learning curve if you don't have much knowledge in the frameworks. 

 

Just some general advice, hope it helps.

Thanks for the advice!

 

I picked the MEAN stack because that's what most tutorials were using is all.

[programmer]

8 hours ago, BrownZeus said:

Hi all,

I'm trying to create a chat app to add as a feature for a school project but I'm not very familiar with JS.

 

Can anyone give me a set of instructions on what to do or point me to an updated tutorial? Every tutorial I found doesn't use JS ES6 and they use older versions of the MEAN stack components.

 

I DO NOT WANT code, just a concsice set of instructions on what to do, what packages to install for node, etc. I get the basic gist of setting up a server using Express i think(?) but no idea how to integrate socket, connect the front end to the backend, and setting up and using a database to save everything.

 

Any help is appreciated. Again, no code, just instructions, I just wanna be pointed in the right direction.

If you are more interested in getting the Angular chat working than learning the MEAN stack, Google's Firebase would let you pretty much skip everything in red. They have a free tier and there is an angular wrapper called Angularfire that makes it easy to push changes to and from the database and its no-code to propagate changes from one user to all others consuming the same data. If you actually want to learn MEAN (and I wouldn't blame you, its in demand) then disregard this.

[vorticalbox]

There is a model called server that is built on top of express that has everything you could ever need built in event socket.io.

 

https://serverjs.io/tutorials/chat/

 

ServerJS is what I use when I'm creating some service for work though I have been working in aws lambda a lot recently.

[nuc]

If you even bothered to look at the socket.io site you'd see a chat example under the demos tab (redirects to https://github.com/socketio/socket.io/tree/master/examples/chat).

[BrownZeus]

On 4/14/2018 at 8:53 AM, nuc said:

If you even bothered to look at the socket.io site you'd see a chat example under the demos tab (redirects to https://github.com/socketio/socket.io/tree/master/examples/chat).

I have looked at it, and I followed everything down to every instruction, and I still can't get it working. Obviously I'm doing something wrong, just don't know what