Rumah > Artikel > pembangunan bahagian belakang > Cara baharu untuk memaparkan data aplikasi web - menggunakan WebSocket dan Socket.io dalam Beego
Cara baharu untuk memaparkan data aplikasi web - menggunakan WebSocket dan Socket.io dalam Beego
- WBOYasal
- 2023-06-22 10:09:151395semak imbas
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
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)
}
}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>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 dc6dce4a544fdca2df29d5ac0ea9906b 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{})
}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!