mbrandau / simple-chat Goto Github PK
View Code? Open in Web Editor NEWA simple chat app using Angular and socket.io
License: MIT License
A simple chat app using Angular and socket.io
License: MIT License
server.on('error', error => {...})
Remove all content from app.component.html and replace it with <app-start></app-start>
.
Wrap the content in a Bootstrap card and place it in the center of the page.
On small devices, the card should be full width and without a border-radius.
Add Bootstrap classes to style the form
Use ng g c chat/chat
to create the component in a chat folder.
The component should contain all messages that are sent. Messages by the current user should be on the right side and those from other users on the left. Both of them should be in boxes. Join and leave messages should be centered.
Create a message model with a type (string) and a data (any) value. The component should have an array containing all those messages.
Generate a new service using ng g s Socket
and install socket.io-client using npm i --save socket.io-client
. Then include socket.io in the service using import * as io from 'socket.io-client';
Import FormsModule
from @angular/forms
and add it to the imports of the AppModule.
Run ng g c Start
in the frontend
folder.
A username should only consist of alphanumeric characters and should have a minimum length of 4.
If the username is valid, the server should emit a login
event to the socket with the value true
.
If it's invalid the login
event should have the value false
.
Use the Template Driven approach. The submit but should be disabled until the form is valid. The username field is required and as a minimum length of 4 while consisting only of alphanumeric characters.
Use the tags provided on getbootstrap.com to include bootstrap in the Angular App.
Install the package with npm install --save beautiful-logs
and add it to the web_server.js file using
const log = require('beautiful-logs')();
log.info('simple-chat is starting...');
File to change: /frontend/src/styles.scss
Add a script that builds the frontend to the main package.json
cd frontend && npm run build --prod
It should the latest node
image and run the command npm start
.
Create basic Node.js server exposing the /frontend/dist folder on http://localhost/ and creating the socket.io object.
Use log.debug()
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.