🛡️
Hogosuru
  • What is Hogosuru?
    • How it works?
    • Minimal requirements to load a wasm
    • Repositories
  • Guides
    • Configure your environment
    • Web API support
    • Create your first project
    • Load and parse a JSON data
    • Create HTML entities and manipulating DOM
      • Create some dynamic content
      • Attach to existing content
      • Modify CSS and attributes
      • Repeat content using template
    • Async work with Promise
    • Network IO: An example with gofiber
    • Observers: Your data always up to date
    • Create a single app with hogosuru
      • Example
Powered by GitBook
On this page
  1. Guides

Observers: Your data always up to date

Observer is not a WEB API standard, but this pattern is essential for the creation of applications whose data needs to be refreshed in real time.

My advice is to use it as much as possible to refresh your data, in order to separate the transport data (whether fetch , xmlhttprequest or websockets) from the display of your data.

To use it , just register a func each time you need to use the data when it's refresh. "mydatakey" is a string that represent a unique identifier of the data. The func is called with the data in parameters each time the the Set function is called. If you have the data from different result route, websockets, you can update the data everywhere a function is listening it.

hogosuru.KeyObservable().RegisterFunc(mydatakey, func(value interface{}) 

To update and trigger the funcs associated to a key, use the Set method. The third parameters persist , ask hogosuru to "store" the data in memory to Get it later. If this value is false, the Set method , call all listener and the data will lost after it. Persistbool can be usefull to reload some data in some circonstance , but keep in mind this data is in memory and the memory is limited.

hogosuru.KeyObservable().Set(mydatakey, data, peristbool)

Example of use Observable

The example below create button with content "danger" and a promise Timeout of 5 second. When the promise is fullfilled, we trigger the change of "dangertextbutton". The observable func is called and the text of button change. Of course you can have multiple func observable for one key


func main() {
	hogosuru.Init()

	// we get the current document
	if doc, err := document.New(); hogosuru.AssertErr(err) {

		//we got the head
		if head, err := doc.Head(); hogosuru.AssertErr(err) {

			if link, err := htmllinkelement.New(doc); hogosuru.AssertErr(err) {

				link.SetRel("stylesheet")
				link.SetHref("https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css")
				head.AppendChild(link.Node)

			}

		}

		if body, err := doc.Body(); hogosuru.AssertErr(err) {
			//lets create some button design with bulma

			if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {

				if list, err := div.ClassList(); hogosuru.AssertErr(err) {
					list.Add("buttons")

				}

				if buttondanger, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {

					buttondanger.SetTextContent("Danger")
					//we get the class list attribute
					if list, err := buttondanger.ClassList(); hogosuru.AssertErr(err) {
						list.Add("button")
						list.Add("is-danger")
					}

					hogosuru.KeyObservable().RegisterFunc("dangertextbutton", func(value interface{}) {

						if textbutton, ok := value.(string); ok {
							buttondanger.SetTextContent(textbutton)
						}

					})
					//we register the upgrade text content

					div.Append(buttondanger.Element)
				}

				body.Append(div.Element)

			}

		}

	}

	//we create a promise wait 5 second and set the "dangertextbutton" key to another value,
	if w1, err := promise.SetTimeout(5000); hogosuru.AssertErr(err) {
		w1.Then(func(i interface{}) *promise.Promise {

			hogosuru.KeyObservable().Set("dangertextbutton", "Hello World", false)

			return nil
		}, nil)
	}

	ch := make(chan struct{})
	<-ch
}

PreviousNetwork IO: An example with gofiberNextCreate a single app with hogosuru

Last updated 3 years ago