Code Monkey home page Code Monkey logo

gochat's Introduction

GoChat

GoChat is a real-time chat application built with Go for the backend and React for the frontend. It uses WebSockets for real-time communication between clients and the server.

Screenshot (767)

Screenshot (769)

Quick Start

Clone the Repository

git clone https://github.com/aayushxrj/gochat

Navigate to the Project Directory

cd ./gochat/

Now you can get the app up and running. You can do this either by running it locally on your machine or via Docker or within a GitHub Codespace.

Local Usage

To get started with GoChat, you need to have Go and Node.js installed on your machine. Go is used for running the backend server, and Node.js is used for managing frontend dependencies and running the development server.

  1. Install Prerequisites
  • Go (1.22.2 or later)
  • Node.js (19.8.1 or later)
  1. Start the backend server
cd src/backend/
go run .
  1. Start the frontend development server

Open a new terminal session and run:

npm install
npm run dev

You can access the app at http://localhost:5173/

Docker Usage

If you have Docker installed and running, you can also run the application using Docker. Follow these steps:

Using Docker Compose

Directly pull and run from Docker Hub (recommended):

docker-compose up

or Build and run the Docker image locally:

docker-compose up --build

You can access the app at http://localhost:5173/

GitHub Codespaces Usage

If you're running this inside a GitHub Codespace, follow these steps to get the app up and running:

  1. Execute the following command in the terminal to get the Codespace name:
export $CODESPACE_NAME
  1. Copy the output and add it to the .env file in the root directory of the project. Your dotenv file should look like this:
VITE_CODESPACE_NAME=your_codespace_name
  1. Build and run the Docker image:
docker-compose up --build

You can then access the app at https://your_codespace_name-5173.app.github.dev/

Using the Application

Screenshot (768)

  • Join the chat

When you first open the GoChat application, you will be prompted to enter a username. Enter a username of your choice and click "Join" to enter the chat room.

  • Send a message

Once in the chat room, you can start typing messages in the input field at the bottom of the screen and click the "Send" button to send a message.

  • Receive messages

Messages from other users will appear in real-time. You can see who sent each message along with the message content.

Contributing

Contributions to GoChat are welcome! If you have an idea for an improvement or have found a bug, please open an issue or submit a pull request

License

GoChat is open-source software licensed under the MIT license.

gochat's People

Contributors

aayushxrj avatar

Watchers

 avatar

gochat's Issues

Backend not connecting to Frontend when docker-compose

Related Commits

3f4b36f

Problem

I have successfully set up and run my project locally, consisting of a Go backend WebSocket server and a React frontend. However, when I dockerized the project using Docker Compose in GitHub Code Spaces, the backend is not connecting to the frontend.

Steps to Reproduce

  1. Clone the repository.
  2. Docker compose
docker-compose up
  1. Access the frontend at http://localhost:5173/
  2. Read logs using Developer Tools (Ctrl+Shift+I)

Screenshots

Screenshot (772)


Screenshot (774)

Trouble Connecting Frontend to Backend in GitHub Codespaces Environment

Problem

I have successfully set up and run my project locally using Docker Compose. However, when running the project on GitHub Codespaces, the frontend and backend are not connecting. This is likely because the code is currently pointing towards localhost, which is not suitable for the GitHub Codespaces environment.

Steps to Reproduce

  1. Open the GitHub Repository using GitHub Codespaces
  2. Run Docker Compose with the command:
docker-compose up

or

docker-compose up --build
  1. Access the frontend at the forwarded port :5173 or the backend at the forwarded port :8080
  2. Read logs using Developer Tools (Ctrl+Shift+I)

Expected Behavior

The frontend should successfully connect to the backend, allowing the application to function as expected.

Actual Behavior

The frontend is not connecting to the backend. Instead, it shows errors related to the connection, likely due to pointing towards localhost

Screenshots

335868120-ec3d2c4c-1443-457f-8a14-518f3acc5b0a

335868127-c889e192-a878-4750-af1f-3b17a4e5c35d

Screenshot (775)

Additional Context

  • Environment: GitHub Codespaces
  • Frontend Port: 5173
  • Backend Port: 8080

Suggested Solution

  1. Update Configuration: Modify the frontend configuration to point to the correct backend URL in the GitHub Codespaces environment. This may involve updating environment variables or configuration files to use the appropriate IP address or hostname instead of localhost.
  2. Network Configuration: Check Docker Compose network settings to ensure that services can communicate correctly within the GitHub Codespaces environment.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.