Web アプリケーションデータを表示する新しい方法 - Beego で WebSocket と Socket.io を使用する-Golang-php.cn

Web アプリケーションデータを表示する新しい方法 - Beego で WebSocket と Socket.io を使用する

WBOY

リリース： 2023-06-22 10:09:15

オリジナル

1460 人が閲覧しました

Web アプリケーションの開発では、データを表示するための新しい方法を常に模索する必要があります。新しい方法の 1 つは、WebSocket と Socket.io を使用することです。これにより、ページ全体をリロードせずにリアルタイムでデータを更新できます。

この記事では、Beego で WebSocket と Socket.io を使用して Web アプリケーションのデータを表示する方法を紹介します。 Beego は Go 言語に基づいた Web フレームワークで、Web アプリケーションをより簡単に構築するのに役立ちます。

まず、Beego と Socket.io をインストールする必要があります:

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

ログイン後にコピー

次に、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)
    }
}

ログイン後にコピー

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>

ログイン後にコピー

JavaScript の場合コードでは、io() 関数を使用してサーバーに接続します。接続が成功すると、コンソールにメッセージが表示されます。 チャットメッセージ イベントを受信すると、新しい <div> 要素をページに追加してメッセージを表示します。また、接続が切断された場合には、コンソールにメッセージを出力します。

最後に、ルート内のコントローラーとビューをバインドする必要があります:

package routers

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

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

ログイン後にコピー

これで、Beego アプリケーションを起動して、http://localhost:8080/ ## にアクセスできます。 # 結果を表示します。 http://localhost:8080/socket で新しいタブを開くと、サーバーに接続し、リアルタイムデータの受信を開始します。いずれかのタブにメッセージを入力すると、もう一方のタブがリアルタイムで更新されます。

要約すると、WebSocket と Socket.io を使用すると、Web アプリケーションのデータをより便利に表示できます。 Beego で WebSocket と Socket.io を使用するのも非常に簡単で、リアルタイム更新機能を実現するために必要なコードはほんの少量だけです。

以上がWeb アプリケーションデータを表示する新しい方法 - Beego で WebSocket と Socket.io を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。