Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lunarwhite/chat-app
A simple real-time chat app built with Go and React.
https://github.com/lunarwhite/chat-app
chat-app demo golang reactjs web-app
Last synced: 12 days ago
JSON representation
A simple real-time chat app built with Go and React.
- Host: GitHub
- URL: https://github.com/lunarwhite/chat-app
- Owner: lunarwhite
- License: mit
- Created: 2022-01-12T09:41:38.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-25T04:08:42.000Z (25 days ago)
- Last Synced: 2024-10-26T17:38:41.355Z (23 days ago)
- Topics: chat-app, demo, golang, reactjs, web-app
- Language: JavaScript
- Homepage:
- Size: 2.26 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chat-app
A simple real-time chat app written in Golang and React.
```
.
├── LICENSE
├── README.md
├── backend
│ ├── Dockerfile
│ ├── go.mod
│ ├── go.sum
│ ├── main.go
│ └── pkg
│ └── websocket
│ ├── client.go
│ ├── pool.go
│ └── websocket.go
└── frontend
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
├── App.css
├── App.js
├── App.test.js
├── api
│ └── index.js
├── components
│ ├── ChatHistory
│ ├── ChatInput
│ ├── Header
│ └── Message
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
```
## setup envs
- golang
- npm & npx & node-sass
## build steps
- part1: env setup
- init backend with golang
- init frontend with react
- part2: simple communication
- server: create a simple WebSocket server(gorilla/websocket)
- client: implement to interact with server
- part3: frontend design
- create a header component
- create a chat history component
- feed it some messages
- part4: multiple clients handling
- improve the codebase by sub-packages
- implement a pool mechanism using go channels
- part5: frontend design improving
- create a chat input component
- create a send message component
- improve the chat history component
- part6: backend dockerizing
- create our Dockerfile
- build our Docker image
- run Docker to deploy
## run & deploy
- backend
```shell
# in folder backend/
go run main.go
# or use Docker
docker build -t backend .
docker run -it -p 8080:8080 backend
```
- frontend
```shell
# in folder frontend/
npm start
```
## reference
- [Building a Chat Application in Go with ReactJS](https://tutorialedge.net/projects/chat-system-in-go-and-react/)