Une nouvelle façon d'afficher les données des applications Web - en utilisant WebSocket et Socket.io dans Beego-Golang-php.cn

Une nouvelle façon d'afficher les données des applications Web - en utilisant WebSocket et Socket.io dans Beego

WBOY

Libérer： 2023-06-22 10:09:15

original

1505 Les gens l'ont consulté

Avec le développement des applications Web, nous devons constamment explorer de nouvelles méthodes pour afficher les données. L'une des nouvelles méthodes consiste à utiliser WebSocket et Socket.io, qui peuvent mettre à jour les données en temps réel sans recharger la page entière.

Cet article expliquera comment utiliser WebSocket et Socket.io dans Beego pour afficher les données des applications Web. Beego est un framework web basé sur le langage Go, qui peut nous aider à créer plus facilement des applications web.

Tout d'abord, nous devons installer Beego et Socket.io :

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

Copier après la connexion

Ensuite, nous créons un contrôleur appelé socket et y démarrons le serveur 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)
    }
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

In Get(), nous initialisons le serveur Socket.io et le démarrons. Lorsque la connexion est établie, le serveur rejoint la salle chat et diffuse l'événement message de chat aux autres clients lorsqu'il reçoit l'événement. Lorsque la connexion est déconnectée, le serveur déclenche l'événement disconnection.

Ensuite, nous devons créer une vue appelée index et utiliser le code JavaScript pour nous connecter au serveur Socket.io afin de recevoir des données en temps réel : 🎜rrreee🎜Dans le code JavaScript, nous utilisons io() se connecte au serveur. Lorsque la connexion est réussie, nous imprimons un message dans la console. Lorsque l'événement message de discussion est reçu, nous ajoutons un nouvel élément <div> à la page pour afficher le message. Nous imprimons également un message dans la console lorsque la connexion est interrompue. 🎜🎜Enfin, nous devons lier le contrôleur et la vue dans l'itinéraire : 🎜rrreee🎜Maintenant, nous pouvons démarrer l'application Beego et visiter http://localhost:8080/ pour voir les résultats. Lorsque nous ouvrons un nouvel onglet sur http://localhost:8080/socket, il se connectera au serveur et commencera à recevoir des données en temps réel. Lorsque nous saisissons un message dans l'un des onglets, l'autre onglet se met à jour en temps réel. 🎜🎜Pour résumer, l'utilisation de WebSocket et Socket.io peut nous aider à afficher plus facilement les données des applications Web. Il est également très simple d'utiliser WebSocket et Socket.io dans Beego, et seule une petite quantité de code est nécessaire pour réaliser la fonction de mise à jour en temps réel. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!