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 で新しいタブを開くと、サーバーに接続し、リアルタイム データの受信を開始します。いずれかのタブにメッセージを入力すると、もう一方のタブがリアルタイムで更新されます。
以上がWeb アプリケーション データを表示する新しい方法 - Beego で WebSocket と Socket.io を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。