• Stars
    star
    822
  • Rank 55,485 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A chat application implemented using Socket.io, TypeScript, Angular and Angular Material components

GitHub stars Tweet

A Socket.io Chat Example Using TypeScript

This repository contains server & client side code using TypeScript language

Blog Post

Read the blog post with details about this project: Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Live Demo

Try live demo: https://typescript-chat.firebaseapp.com

Support this project

  • Star GitHub repository ⭐
  • Create pull requests, submit bugs or suggest new features
  • Follow updates on Twitter or Github

Running Server and Client locally

Prerequisites

First, ensure you have the following installed:

  1. NodeJS - Download and Install latest version of Node: NodeJS
  2. Git - Download and Install Git
  3. Angular CLI - Install Command Line Interface for Angular https://cli.angular.io/

After that, use Git bash to run all commands if you are on Windows platform.

Clone repository

In order to start the project use:

$ git clone https://github.com/luixaviles/socket-io-typescript-chat.git
$ cd socket-io-typescript-chat

Run Server

To run server locally, just install dependencies and run gulp task to create a build:

$ cd server
$ npm install -g gulp-cli
$ npm install
$ gulp build
$ npm start

The socket.io server will be running on port 8080

When you run npm start, this folder leverages nodemon which will automatically reload the server after you make a change and save your Typescript file. Along with nodemon, there is also a gulp watch task that you can run to reload the files but it's not necessary and is provided merely as a teaching alternative.

Run Angular Client

Open other command line window and run following commands:

$ cd client
$ npm install
$ ng serve

Now open your browser in following URL: http://localhost:4200

Server Deployment

Take a look the Wiki Page for more details about deploying on Heroku and Zeit.co.

Feel free to update that page and Readme if you add any other platform for deployment!

Forks

The Open Source community is awesome! If you're working in a fork with other tech stack, please add the reference of your project here:

Features Author Status
React + TypeScript + Material-UI client nilshartmann In Progress

Contribution

Contributions are greatly appreciated. You can contribute by adding i18n support with your language, the testing section or any other feature.

Contributors

luixaviles hughanderson4 ultrarunner theIDinside carmius Hellmy
luixaviles hughanderson4 ultrarunner theIDinside carmius Hellmy
you
You

License

MIT

More Repositories

1

litelement-website

A Single Page Application(SPA) based on Web Components using LitElement and TypeScript
TypeScript
75
star
2

web-speech-angular

A Web Application that implements Speech Recognition and Speech Synthesis using Web APIs, Angular, TypeScript, RxJS, and Angular Material
TypeScript
66
star
3

node-typescript-app

A node server with a set of RESTful services using entirely TypeScript language
TypeScript
40
star
4

typescript-rollup

A Single-Page Application(SPA) built using TypeScript, Rollup.js, and Web Dev Server
TypeScript
28
star
5

event-bus-typescript

An Event Bus implementation in TypeScript
TypeScript
26
star
6

platzi-typescript

TypeScript
26
star
7

gemini-angular-nestjs

A fullstack web application implemented using Angular, NestJS and the Gemini API
TypeScript
25
star
8

edteam-typescript-intro

Introducción a TypeScript - Angular desde Cero
TypeScript
18
star
9

angular-lit-web-components

A project example to integrate Web Components using Lit and Angular
TypeScript
17
star
10

angular2-demo

A Fully Functional Angular 2 Demo application
TypeScript
14
star
11

angular2-material-demo

An Angular 2 Tech Event Application using Angular Material components
TypeScript
13
star
12

cors-proxy-server-koa

Solving the CORS issue using a Proxy Server with Koa
TypeScript
10
star
13

edteam-especialidad-angular

Especialidad Frontend con Angular
TypeScript
9
star
14

slideshow-angular-swiper

A slideshow app using Angular and Swiper
TypeScript
8
star
15

edteam-angular

Angular desde Cero
TypeScript
8
star
16

chatbot-angular-palm

A Chatbot application implemented using Angular and PaLM API
TypeScript
7
star
17

angular-interceptors-demo

Angular Interceptors Demo
TypeScript
7
star
18

angular-starter

An Angular 2 starter project
TypeScript
6
star
19

curso-angular

JavaScript
6
star
20

ngconfco-forms-starter

NgConf Colombia - Mastering Angular Forms Workshop
TypeScript
5
star
21

workshop-real-time-labs

Exercises for the real-time workshop
4
star
22

virtual-scroll-paged-api

A real-world demo using Virtual Scroll, RxJS, paged APIs, and Angular
TypeScript
4
star
23

fundamentos-javascript

Mini Curso sobre Fundamentos de JavaScript
JavaScript
4
star
24

angular-cdk-sorting-drag-drop

Angular demo for Sorting items through Angular CDK(Drag and Drop) and a mixed-orientation layout.
TypeScript
4
star
25

edteam-curso-typescript

EDteam - Curso: TypeScript desde Cero
TypeScript
4
star
26

angular-youtube-player-demo

An Angular Application using the YouTube video player
TypeScript
3
star
27

signed-image-uploading-angular-nestjs

TypeScript
3
star
28

angular-upload-images-demo

An Angular demo to enable upload images and render them in the browser through a Drag and Drop directive.
TypeScript
3
star
29

ng-india-demo

Ng-India Conference Demo - Web Components using Lit and Angular
TypeScript
3
star
30

angularjs-best-practices-example

An example project with best practices for Angular 1.x version
JavaScript
2
star
31

virtual-scroll-demo

Angular virtual scroll demo(CDK)
TypeScript
2
star
32

websockets-typescript

Using webSockets through TypeScript language
TypeScript
2
star
33

ngconfco-forms-progress

NgConf Colombia - Mastering Angular Forms Workshop
TypeScript
2
star
34

ed-taller

ED Taller para el curso de Angular con EDteam
TypeScript
2
star
35

breakpointobserver-example-angular

A BreakpointObserver example using Angular
TypeScript
2
star
36

demo-bit-angular-lit

A SPA importing Bit components written in Lit
TypeScript
2
star
37

googledevs-litelement-demo

Google Deveopers Latam Session - Creando Web Components con LitElement y TypeScript
TypeScript
2
star
38

angular-update-title

An Angular Application that implements a custom Title Service to update the title based on router changes
TypeScript
2
star
39

bower-jquery-selection

Bower friendly version for jquery.selection plugin
JavaScript
1
star
40

spa-heremaps-lit

A Single-Page Applications using HERE Maps API, Lit for Web Components and TypeScript
TypeScript
1
star
41

demo-bit-angular-workspace

POC about using Bit and Angular workspaces
TypeScript
1
star
42

google-io-extended-2015

JavaScript
1
star
43

mi-primera-app

Mi primera aplicacion usando Angular
TypeScript
1
star
44

favicon-demo

Favicon example
HTML
1
star
45

image-gallery-virtual-scroll

A demo of an Image Gallery using Virtual Scroll and Angular
TypeScript
1
star
46

demo-angular-standalone-components

An Angular application based on standalone components
TypeScript
1
star
47

workshop-gdg-santacruz

Fullstack Development with Angular
TypeScript
1
star