Skip to content
This repository has been archived by the owner on Aug 28, 2022. It is now read-only.
/ golive Public archive

⚡ Live views for GoLang with reactive HTML over WebSockets 🔌

License

Notifications You must be signed in to change notification settings

brendonmatos/golive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GoLive

💻 Reactive HTML Server Side Rendered by GoLang over WebSockets 🚀

Use Go and Zero JavaScript to program reactive front-ends!

How?

  1. Render Server Side HTML
  2. Connect to same server using Websocket
  3. Send user events
  4. Change state of component in server
  5. Render Component and get diff
  6. Update instructions are sent to the browser

Getting Started

Any suggestions are absolutely welcome

This project it's strongly inspired by Elixir Phoenix LiveView.

Component Example

package components 

import (
	"github.com/brendonmatos/golive"
	"time"
)

type Clock struct {
	golive.LiveComponentWrapper
	ActualTime string
}

func NewClock() *golive.LiveComponent {
	return golive.NewLiveComponent("Clock", &Clock{})
}

func (t *Clock) Mounted(_ *golive.LiveComponent) {
	go func() {
		for {
			t.ActualTime = time.Now().Format(time.RFC3339Nano)
			time.Sleep((time.Second * 1) / 60)
			t.Commit()
		}
	}()
}

func (t *Clock) TemplateHandler(_ *golive.LiveComponent) string {
	return `
		<div>
			<span>Time: {{ .ActualTime }}</span>
		</div>
	`
}

Server Example

  
package main

import (
	"github.com/brendonmatos/golive"
	"github.com/brendonmatos/golive/examples/components"
	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/websocket/v2"
)

func main() {
	app := fiber.New()
	liveServer := golive.NewServer()

	app.Get("/", liveServer.CreateHTMLHandler(components.NewClock, golive.PageContent{
		Lang:  "us",
		Title: "Hello world",
	}))

	app.Get("/ws", websocket.New(liveServer.HandleWSRequest))

	_ = app.Listen(":3000")
}

That's it!

More Examples

Slider

Simple todo

All at once using components!

GoBook

Go to repo