Go Notebook
  • Introduction
  • Syntax Helpers
    • Append
    • String
    • Slice
  • Idioms
    • Custom JSON Marshaling
    • Functional Options
    • Type Embedding
    • Laws of Reflection
  • Design Patterns
    • Builder
    • Factory Method
    • Object Pool
    • Singleton
    • Observer
    • Strategy
  • Hello World
    • Getting Started With Go
    • Go Packages
    • Hello World
  • Tic Tac Toe
    • Go Interfaces
    • Go Error Handling
    • Tic Tac Toe
  • HTTP Server
    • HTTP Handler
    • Build a Calculator
    • HTTP Unit Test
  • Concurrency
    • Goroutines
    • Go Concurrency Part 1
    • Go Concurrency Part 2
  • WebSocket Server
    • WebSocket Handler
    • Build a Chatroom
  • User Authentication
    • Go Module
    • Popular Web Libraries
    • React Tools
    • Build an Authentication Server
  • Numerical Computing
    • Gonum
    • Neural Networks
Powered by GitBook
On this page
  • Prerequisite
  • Dependency Management - dep
  • Installation
  • Run dep
  • Frontend
  • WebSocket
  • Node Modules
  • Build index.js
  • Project Chatroom
  • Source
  1. WebSocket Server

Build a Chatroom

PreviousWebSocket HandlerNextUser Authentication

Last updated 5 years ago

We are going to build a full stack application using React/TypeScript frontend and Go backend. The Go backend is a server that can receive websocket messages from clients and broadcast them to other clients.

Prerequisite

Part 3 of .

Dependency Management - dep

Dep is an awesome dependency management tool for Go, it's equivalent to npm for JavaScript. You can learn more about .

Installation

go-get

The following command will install dep to your Go workspace. When you run dep in terminal, the binary is discoverable because you have your GOPATH configured.

go get -u github.com/golang/dep/cmd/dep

brew

If you are a Mac user, there is one more convenient option for you. You can use Homebrew! Simply run the following.

brew install dep
brew upgrade dep

Run dep

Once dep is installed, you can run dep init to initialize a dep environment for your project.

cd $GOPATH/src/go-academy/your_project/
dep init

You will see Gopkg.lock and Gopkg.toml files. Now run dep ensure.

dep ensure -v

Frontend

You can copy and paste the front end code in my chatroom/frontend folder. However, please feel free to write your own frontend implementation.

WebSocket

We are going to use JavaScript's native WebSocket class to establish websocket connection to the server.

this.ws = new WebSocket("ws://localhost:8000/streams/messages")
this.websocket.onopen = this.handleSocketOpen;
this.websocket.onmessage = this.handleSocketMessage;
this.websocket.onerror = this.handleSocketError;
this.websocket.onclose = this.handleSocketClose;

Client-side socket connection typically accepts 4 callbacks:

  1. Callback is invoked when socket is opened.

  2. Callback is invoked when socket receives a message.

  3. Callback is invoked when socket encounters an error.

  4. Callback is invoked when socket is closed.

Node Modules

I am using babel and webpack for compiling the latest ES6/ES7 syntax into browser compatible version. I am also using node-sass for compiling .scss into .css. I make promise-based requests to server using axios. For the complete list of node modules, please look at the package.json.

Build index.js

Navigate to the frontend/ folder and run the following npm commands.

cd frontend/
npm install
npm run build

Remember to run npm run build, otherwise you won't see an index.js in your public folder.

Project Chatroom

Source

Go Tour
Dep
GitHub
https://www.youtube.com/watch?v=6vS6wYLbyjg&feature=youtu.bewww.youtube.com
https://www.youtube.com/watch?v=Q29wM5sYKiw&feature=youtu.bewww.youtube.com