Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luixaviles/socket-io-typescript-chat

A chat application implemented using Socket.io, TypeScript, Angular and Angular Material components
https://github.com/luixaviles/socket-io-typescript-chat

angular angular-material2 chat nodejs socket typescript

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README

        



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](https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1)

## Live Demo
Try live demo: [https://typescript-chat.firebaseapp.com](https://typescript-chat.firebaseapp.com)

# Support this project
- Star GitHub repository :star:
- Create pull requests, submit bugs or suggest new features
- Follow updates on [Twitter](https://twitter.com/luixaviles) or [Github](https://github.com/luixaviles)

![](https://luixaviles.com/assets/images/posts/typescript-chat/typescript-chat.gif?raw=true)

# Running Server and Client locally
## Prerequisites

First, ensure you have the following installed:

1. NodeJS - Download and Install latest version of Node: [NodeJS](https://nodejs.org)
2. Git - Download and Install [Git](https://git-scm.com)
3. Angular CLI - Install Command Line Interface for Angular [https://cli.angular.io/](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:

```bash
$ 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:

```bash
$ 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](https://nodemon.io/) 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:

```bash
$ cd client
$ npm install
$ ng serve
```

Now open your browser in following URL: [http://localhost:4200](http://localhost:4200/)

# Server Deployment

Take a look the [Wiki Page](https://github.com/luixaviles/socket-io-typescript-chat/wiki) 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](https://github.com/nilshartmann/socket-io-typescript-chat/tree/react-client/client-react) | [nilshartmann](https://github.com/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](https://github.com/luixaviles) | [hughanderson4](https://github.com/hughanderson4) | [ultrarunner](https://github.com/ultrarunner) | [theIDinside](https://github.com/theIDinside) | [carmius](https://github.com/carmius) | [Hellmy](https://github.com/Hellmy) |
:---: |:---: |:---: |:---: |:---: |:---: |
[luixaviles](https://github.com/luixaviles) |[hughanderson4](https://github.com/hughanderson4) |[ultrarunner](https://github.com/ultrarunner) |[theIDinside](https://github.com/theIDinside) |[carmius](https://github.com/carmius) |[Hellmy](https://github.com/Hellmy) |[headwinds](https://github.com/headwinds) |

[you](https://github.com/luixaviles) |
:---: |
[You](https://github.com/luixaviles) |

## License

MIT