NOTICE: This repo has been deprecated
[DEPRECATED] Angular2 Chat App
An Angular 2 chat app using Angular 2, Node, socket.io, Express, SystemJS, TypeScript, Services, Injectables, Forms, Routing & Navigation, and tslint by GeekyAnts team
Note: This repo is no longer maintained.
This repo shows an example chat application using Socket.io, Node and Angular 2. The goal is to implement Socket Programming with Angular 2. It also features:
- Express configuration with TypeScript, and tslint
- Use of injectables, forms, routing & navigation services in Angular 2
- Wiring together Angular2 client-side components with Socket.io and Express on the server.
- And much more
View the chat-app GIF here:
Quick start
# clone the repo
git clone https://github.com/start-angular/angular2-node-socket-io-chat-app.git
# change into the repo directory
cd angular2-node-socket-io-chat-app
# install
npm install
# run
npm startThen visit http://localhost:3000 in your browser.
Architecture
There are two components:
NickName- for the welcome page that initiates socket client connectionChat- for the chat page that depicts message flow between different sockets
There are mainly three sections of the Chat-component:
ChatBox- for the interaction between different chat-Users/socket connectionsChatUsersList- shows the currently active chat-Users/ScoketsChatUserAlerts- shows the chat-user alerts for new user connection, dis-connected user and success for message passing
File Structure
Here's an overview of how the files are laid out in this project:
angular2-node-socket-io-chat-app/
|
โโโ client/ * Where our Angular2 client code is stored
โ โโโ chat-component/ * All of our chat-component files are here
โ โ โโโ chat.component.ts * Chat Component
โ โ โโโ chat.component.html * chat Component HTML
โ โ โโโ chat.module.ts * chat module
โ โ โโโ chat.route.ts * chat component routes
โ โ โโโ index.ts * index file for chat Component
| |
โ โโโ nickName-component/ * All of our TypeScript is here
| | |
โ โ โโโ nickName.component.ts * nickName Component
โ โ โโโ nickName.component.html * nickName Component HTML
โ โ โโโ nickName.module.ts * nickName module
โ โ โโโ nickName.route.ts * nickName component routes
โ โ โโโ index.ts * index file for nickName Component
| |
โ โโโ service/ * service for all components
| | |
โ โ โโโ global.ts * file with global attributes
| |
โ โโโ app.component.html * Home component HTML
โ โโโ app.component.ts * Home component
โ โโโ app.module.ts * Aap Module
โ โโโ app.routing.ts * App images
โ โโโ main.ts * Angular 2 Entry point
|
โโโ public/ * Stores app images and gif
| |
โ โโโ Chat-Page.png * chat page image
โ โโโ chat-app.gif * chat app gif
โ โโโ ChatPage-Description.png * chat page description image
โ โโโ Sequence-Diagram.png * app sequence diagram image
โ โโโ Welcome-page.png * welcome page image
|
โโโ server/ * Server side code (socket.io,express,node)
โ โโโ index.js * Aap entry point
|
โโโ typings/ * tsd managed typings
โโโ index.html * HTML entry point
โโโ styles.css * Contains app CSS
โโโ package.json * Our javascript dependencies
โโโ README.md * This file
โโโ systemjs.config.js * syatemJS configuration file
โโโ tsconfig.js * Some hacks to get TypeScript tests
โโโ tslint.json * Configures our TypeScript linter
โโโ typings.json * Configures our TypeScript linter
Known Issues
There is a issue with Windows systems. The directory path doesn't gets resolved correctly thereby creates compile issues with typecsript files. The app works fine on MAC and Linux systems. This issue will be resolved in coming weeks. Also If anyone finds a fix for the same, do send a pull request.