Search for a command to run...
Hi, I am a cat lover and software engineer from Malang, mostly doing PHP and stuff. Software Engineer Live in Malang, Indonesia Visit my resume and portfolios at didiktrisusanto.dev See you, folks!
For many people and businesses, navigating the frequently dangerous landscape of financial loss can be an intimidating and overwhelming process. Nevertheless, the knowledgeable staff at Wizard Hilton Cyber Tech provides a ray of hope and direction with their indispensable range of services. Their offerings are based on a profound grasp of the far-reaching and terrible effects that financial setbacks, whether they be the result of cyberattacks, data breaches, or other unforeseen tragedies, can have. Their highly-trained analysts work tirelessly to assess the scope of the damage, identifying the root causes and developing tailored strategies to mitigate the fallout. From recovering lost or corrupted data to restoring compromised systems and securing networks, Wizard Hilton Cyber Tech employs the latest cutting-edge technologies and industry best practices to help clients regain their financial footing. But their support goes beyond the technical realm, as their compassionate case managers provide a empathetic ear and practical advice to navigate the emotional and logistical challenges that often accompany financial upheaval. With a steadfast commitment to client success, Wizard Hilton Cyber Tech is a trusted partner in weathering the storm of financial loss, offering the essential services and peace of mind needed to emerge stronger and more resilient than before. Call; Email : wizardhiltoncybertech ( @ ) gmail (. ) com
OR
support ( @ ) wizardhiltoncybertech (.) com
WhatsApp number +13024457895
It's great to see more examples of Go projects. This is my go-to tool for building web apps.
thank you!
Yup, Go is one of the great tool for building web apps with good performance
Nguyen Engineer Didn't expected that but thanks for supporting me!
I believed this topic is a lot in the internet but I want to write it anyway, because documenting your own learning journey and share it to the world is good right? Request middleware performs some specific function on the HTTP request or response a...
Long time no see. After took a long break, I finally started to writing again. I missed code with Go so I decided to share about Graceful shutdown in this post. Graceful shutdown is safer and proper way to shutdown your HTTP server especially in Go w...
So my unemployed journey was stopped at #10 because many things happened and today at #37 or 57 days since my last day at work, I finally secured some job offers and agreed to join at a Singapore based company in 2nd January 2025 which I become first...
No update on the job hunting today. An ex coworker gave me a job vacancy from Switzerland and didn’t took any action yet. Decided to continue on my playground building a short url service using Go. The first one was how to implement templ in go as vi...
I was finding a fun project to work with Go, HTMX, and Tailwwindcss and ended up built a simple real-time web based system monitor with the power of web socket. Here’s the result.
It shows system information, memories, disk, CPU, and running processes, updated automatically every 5 seconds.
I’ll break down the code little bit in this post.
Go 1.23.2
type HttpServer struct {
subscriberMessageBuffer int
Mux http.ServeMux
subscribersMutex sync.Mutex
subscribers map[*subscriber]struct{}
}
type subscriber struct {
msgs chan []byte
}
It’s quite straightforward. HttpServer contains a http.ServeMux as http handler and subscribers for web socket broadcasting later. subscriber is simply has msgs channel for data update.
Since it only needs to serve a single HTML file, then it needs URL to show the page, and one URL for web socket connection.
func NewHttpServer() *HttpServer {
s := &HttpServer{
subscriberMessageBuffer: 10,
subscribers: make(map[*subscriber]struct{}),
}
s.Mux.Handle("/", http.FileServer(http.Dir("./views")))
s.Mux.HandleFunc("/ws", s.subscribeHandler)
return s
}
Endpoint /ws will handling web socket connection and managing a subscriber. First it will initiate a new subscriber and added it to a map in the http server structure. Lock will be used to prevent race condition since we will use go routine later.
func (s *HttpServer) subscribeHandler(w http.ResponseWriter, r *http.Request) {
err := s.subscribe(r.Context(), w, r)
if err != nil {
fmt.Println(err)
return
}
}
func (s *HttpServer) addSubscriber(subscriber *subscriber) {
s.subscribersMutex.Lock()
s.subscribers[subscriber] = struct{}{}
s.subscribersMutex.Unlock()
fmt.Println("subscriber added", subscriber)
}
Web socket is starting accept a connection and via loop, we will detect an incoming channel msgs from subscriber and write it to web socket.
func (s *HttpServer) subscribe(ctx context.Context, w http.ResponseWriter, r *http.Request) error {
var c *websocket.Conn
subscriber := &subscriber{
msgs: make(chan []byte, s.subscriberMessageBuffer),
}
s.addSubscriber(subscriber)
c, err := websocket.Accept(w, r, nil)
if err != nil {
return err
}
defer c.CloseNow()
ctx = c.CloseRead(ctx)
for {
select {
case msg := <-subscriber.msgs:
ctx, cancel := context.WithTimeout(ctx, time.Second)
defer cancel()
err := c.Write(ctx, websocket.MessageText, msg)
if err != nil {
return err
}
case <-ctx.Done():
return ctx.Err()
}
}
}
Auto update the system info data is handled by go routine. We will build a html response that will be sent via web socket and htmx will handle the update on the html side.
func main() {
fmt.Println("Starting system monitor")
s := server.NewHttpServer()
go func(s *server.HttpServer) {
for {
hostStat, _ := host.Info()
timestamp := time.Now().Format("2006-01-02 15:04:05")
html := `
<span hx-swap-oob="innerHTML:#data-timestamp">` + timestamp + `</span>
<span hx-swap-oob="innerHTML:#system-hostname">` + hostStat.Hostname + `</span>
<span hx-swap-oob="innerHTML:#system-os">` + hostStat.OS + `</span>
`
s.Broadcast([]byte(html))
time.Sleep(time.Second * 5)
}
}(s)
// ...
}
Syntax hx-swap-oob="innerHTML:#data-timestamp" in htmx is tell us that swap a component inside data-timestamp id in our HTML. All swapping mechanism will be the same for other system information components.
All swappable html components will be sent via Broadcast(msg) method and later will be sent via channel every 5 seconds.
func (s *HttpServer) Broadcast(msg []byte) {
s.subscribersMutex.Lock()
for subscriber := range s.subscribers {
subscriber.msgs <- msg
}
s.subscribersMutex.Unlock()
}
It’s plain HTML file and for Tailwindcss I simple used CDN for that
<script src="https://cdn.tailwindcss.com"></script>
Same idea for HTMX and web socket extension for using CDN
<script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
The system monitor page is expected to receives all the data by web socket so I can set it from the main div container. Specify hx-ext=”ws” to tell HTMX for using web socket extension and ws-connect=”/ws” to tell web socket to connect via /ws URL.
<body class="bg-gray-700 text-white">
<div class="container mx-auto p-8" hx-ext="ws" ws-connect="/ws">
<!-- all the data -->
</div>
</body>
Here is the full version of the code https://github.com/didikz/gosysmon-web and you may want to play around with your own version.
Happy coding!