Eine neue Möglichkeit, Webanwendungsdaten anzuzeigen – mit WebSocket und Socket.io in Beego-Golang-php.cn

Eine neue Möglichkeit, Webanwendungsdaten anzuzeigen – mit WebSocket und Socket.io in Beego

WBOY

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

Original

1461 Leute haben es durchsucht

Mit der Entwicklung von Webanwendungen müssen wir ständig neue Methoden zur Anzeige von Daten erforschen. Eine der neuen Möglichkeiten ist die Verwendung von WebSocket und Socket.io, die Daten in Echtzeit aktualisieren können, ohne die gesamte Seite neu laden zu müssen.

In diesem Artikel wird erläutert, wie Sie WebSocket und Socket.io in Beego verwenden, um Daten aus Webanwendungen anzuzeigen. Beego ist ein Web-Framework, das auf der Go-Sprache basiert und uns dabei helfen kann, Webanwendungen einfacher zu erstellen.

Zuerst müssen wir Beego und Socket.io installieren:

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

Nach dem Login kopieren

Als nächstes erstellen wir einen Controller namens socket und starten darin den Socket.io-Server: socket的控制器，并在其中启动Socket.io服务器：

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)
    }
}

Nach dem Login kopieren

在Get()方法中，我们初始化Socket.io服务器并启动它。当连接建立时，服务器会加入房间chat，并在收到chat message事件时将该事件广播给其他客户端。当连接断开时，服务器会触发disconnection事件。

接下来，我们需要创建一个名为index的视图，并使用JavaScript代码连接到Socket.io服务器，以便接收实时数据：

<!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>

Nach dem Login kopieren

在JavaScript代码中，我们使用io()函数连接到服务器。当连接成功时，我们在控制台中输出消息。当收到chat message事件时，我们在页面上添加一个新的<div>元素来展示消息。当连接断开时，我们也在控制台中输出消息。

最后，我们需要在路由中将控制器和视图绑定起来：

package routers

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

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

Nach dem Login kopieren

现在我们可以启动Beego应用程序，并访问http://localhost:8080/来查看结果。当我们在http://localhost:8080/socketrrreee

In Get()-Methode initialisieren wir den Socket.io-Server und starten ihn. Wenn die Verbindung hergestellt ist, tritt der Server dem Raum chat bei und sendet das chat message-Ereignis an andere Clients, wenn er das Ereignis empfängt. Wenn die Verbindung getrennt wird, löst der Server das Ereignis disconnection aus.

Als nächstes müssen wir eine Ansicht namens index erstellen und mithilfe von JavaScript-Code eine Verbindung zum Socket.io-Server herstellen, um Echtzeitdaten zu empfangen: 🎜rrreee🎜Im JavaScript-Code verwenden wir io() stellt eine Verbindung zum Server her. Wenn die Verbindung erfolgreich ist, geben wir eine Nachricht in der Konsole aus. Wenn das Ereignis Chat-Nachricht empfangen wird, fügen wir der Seite ein neues <div>-Element hinzu, um die Nachricht anzuzeigen. Wir geben auch eine Meldung in der Konsole aus, wenn die Verbindung unterbrochen wird. 🎜🎜Zuletzt müssen wir den Controller und die Ansicht in der Route binden: 🎜rrreee🎜Jetzt können wir die Beego-Anwendung starten und http://localhost:8080/ besuchen, um die Ergebnisse zu sehen. Wenn wir einen neuen Tab unter http://localhost:8080/socket öffnen, wird eine Verbindung zum Server hergestellt und der Empfang von Echtzeitdaten beginnt. Wenn wir in einem der Tabs eine Nachricht eingeben, wird der andere Tab in Echtzeit aktualisiert. 🎜🎜Zusammenfassend lässt sich sagen, dass die Verwendung von WebSocket und Socket.io uns dabei helfen kann, die Daten von Webanwendungen bequemer anzuzeigen. Es ist auch sehr einfach, WebSocket und Socket.io in Beego zu verwenden, und es ist nur eine kleine Menge Code erforderlich, um die Echtzeit-Aktualisierungsfunktion zu erreichen. 🎜

Das obige ist der detaillierte Inhalt vonEine neue Möglichkeit, Webanwendungsdaten anzuzeigen – mit WebSocket und Socket.io in Beego. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!