A new way to display web application data - using WebSocket and Socket.io in Beego-Golang-php.cn

A new way to display web application data - using WebSocket and Socket.io in Beego

WBOY

Release： 2023-06-22 10:09:15

Original

1506 people have browsed it

With the development of web applications, we need to constantly explore new methods to display data. One of the new ways is to use WebSocket and Socket.io, which can update data in real time without reloading the entire page.

This article will introduce how to use WebSocket and Socket.io in Beego to display data from web applications. Beego is a web framework based on Go language, which can help us build web applications more easily.

First, we need to install Beego and Socket.io:

go get -u github.com/astaxie/beego
go get -u github.com/googollee/go-socket.io

Copy after login

Next, we create a controller named socket and start Socket.io in it Server:

package controllers

import (
    "github.com/astaxie/beego"
    "github.com/googollee/go-socket.io"
)

type SocketController struct {
    beego.Controller
}

func (this *SocketController) Get() {
    server, err := socketio.NewServer(nil)
    if err != nil {
        beego.Error("socket.io server error:", err)
    } else {
        server.On("connection", func(so socketio.Socket) {
            beego.Info("socket.io connected")
            so.Join("chat")
            so.On("chat message", func(msg string) {
                beego.Info("chat message:", msg)
                so.BroadcastTo("chat", "chat message", msg)
            })
            so.On("disconnection", func() {
                beego.Info("socket.io disconnected")
            })
        })
        server.On("error", func(so socketio.Socket, err error) {
            beego.Error("socket.io error:", err)
        })
        server.ServeHTTP(this.Ctx.ResponseWriter, this.Ctx.Request)
    }
}

Copy after login

In the Get() method, we initialize the Socket.io server and start it. When the connection is established, the server joins the room chat and broadcasts the chat message event to other clients when it receives the event. When the connection is disconnected, the server will trigger the disconnection event.

Next, we need to create a view named index and use JavaScript code to connect to the Socket.io server in order to receive real-time data:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket and Socket.io in Beego</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('/');
        socket.on('connect', function() {
            console.log('socket.io connected');
        });
        socket.on('chat message', function(msg) {
            console.log('chat message:', msg);
            var div = document.createElement('div');
            div.innerHTML = msg;
            document.body.appendChild(div);
        });
        socket.on('disconnect', function() {
            console.log('socket.io disconnected');
        });
    </script>
</head>
<body>
    <h1>WebSocket and Socket.io in Beego</h1>
</body>
</html>

Copy after login

In JavaScript In the code, we use the io() function to connect to the server. When the connection is successful, we print a message in the console. When the chat message event is received, we add a new <div> element to the page to display the message. We also print a message in the console when the connection is broken.

Finally, we need to bind the controller and the view in the route:

package routers

import (
    "github.com/astaxie/beego"
    "webapp/controllers"
)

func init() {
    beego.Router("/", &controllers.MainController{})
    beego.Router("/socket", &controllers.SocketController{})
}

Copy after login

Now we can start the Beego application and visit http://localhost:8080/ to view the results. When we open a new tab at http://localhost:8080/socket, it will connect to the server and start receiving real-time data. When we enter a message in one of the tabs, the other tab updates in real time.

To sum up, using WebSocket and Socket.io can help us display the data of web applications more conveniently. It is also very simple to use WebSocket and Socket.io in Beego, and only a small amount of code is needed to achieve the real-time update function.

The above is the detailed content of A new way to display web application data - using WebSocket and Socket.io in Beego. For more information, please follow other related articles on the PHP Chinese website!