Cara baharu untuk memaparkan data aplikasi web - menggunakan WebSocket dan Socket.io dalam Beego-Golang-php.cn

Cara baharu untuk memaparkan data aplikasi web - menggunakan WebSocket dan Socket.io dalam Beego

WBOY

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

asal

1436 orang telah melayarinya

Dengan pembangunan aplikasi web, kami perlu sentiasa meneroka kaedah baharu untuk memaparkan data. Salah satu cara baharu ialah menggunakan WebSocket dan Socket.io, yang boleh mengemas kini data dalam masa nyata tanpa memuatkan semula keseluruhan halaman.

Artikel ini akan memperkenalkan cara menggunakan WebSocket dan Socket.io dalam Beego untuk memaparkan data daripada aplikasi web. Beego ialah rangka kerja web berdasarkan bahasa Go, yang boleh membantu kami membina aplikasi web dengan lebih mudah.

Pertama, kita perlu memasang Beego dan Socket.io:

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

Salin selepas log masuk

Seterusnya, kami mencipta pengawal bernama socket dan mulakan pelayan Socket.io di dalamnya:

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

Salin selepas log masuk

Dalam kaedah Get(), kami memulakan pelayan Socket.io dan memulakannya. Apabila sambungan diwujudkan, pelayan menyertai bilik chat dan menyiarkan acara chat message kepada pelanggan lain apabila ia menerimanya. Apabila sambungan diputuskan, pelayan mencetuskan acara disconnection.

Seterusnya, kita perlu mencipta paparan bernama index dan menggunakan kod JavaScript untuk menyambung ke pelayan Socket.io untuk menerima data masa nyata:

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

Salin selepas log masuk

Dalam kod JavaScript , kami Gunakan fungsi io() untuk menyambung ke pelayan. Apabila sambungan berjaya, kami mencetak mesej dalam konsol. Apabila acara chat message diterima, kami menambah elemen <div> baharu pada halaman untuk memaparkan mesej. Kami juga mencetak mesej dalam konsol apabila sambungan terputus.

Akhir sekali, kita perlu mengikat pengawal dan melihat dalam laluan:

package routers

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

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

Salin selepas log masuk

Kini kita boleh melancarkan aplikasi Beego dan melawat http://localhost:8080/ untuk melihat hasilnya. Apabila kami membuka tab baharu dalam http://localhost:8080/socket, ia akan bersambung ke pelayan dan mula menerima data masa nyata. Apabila kami memasukkan mesej dalam salah satu tab, tab yang lain dikemas kini dalam masa nyata.

Ringkasnya, menggunakan WebSocket dan Socket.io boleh membantu kami memaparkan data aplikasi web dengan lebih mudah. Ia juga sangat mudah untuk menggunakan WebSocket dan Socket.io dalam Beego, dan hanya sejumlah kecil kod diperlukan untuk mencapai fungsi kemas kini masa nyata.

Atas ialah kandungan terperinci Cara baharu untuk memaparkan data aplikasi web - menggunakan WebSocket dan Socket.io dalam Beego. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!