웹 애플리케이션 데이터를 표시하는 새로운 방법 - Beego에서 WebSocket 및 Socket.io 사용
- WBOY원래의
- 2023-06-22 10:09:151395검색
웹 애플리케이션의 개발과 함께 우리는 데이터를 표시하는 새로운 방법을 끊임없이 탐구해야 합니다. 새로운 방법 중 하나는 전체 페이지를 다시 로드하지 않고도 실시간으로 데이터를 업데이트할 수 있는 WebSocket 및 Socket.io를 사용하는 것입니다.
이 글에서는 Beego에서 WebSocket과 Socket.io를 사용하여 웹 애플리케이션의 데이터를 표시하는 방법을 소개합니다. Beego는 Go 언어를 기반으로 한 웹 프레임워크로, 웹 애플리케이션을 보다 쉽게 구축하는 데 도움이 됩니다.
먼저 Beego와 Socket.io를 설치해야 합니다.
go get -u github.com/astaxie/beego go get -u github.com/googollee/go-socket.io
다음으로 socket이라는 컨트롤러를 만들고 그 안에서 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()函数连接到服务器。当连接成功时，我们在控制台中输出消息。当收到chat message事件时，我们在页面上添加一个新的dc6dce4a544fdca2df29d5ac0ea9906b元素来展示消息。当连接断开时，我们也在控制台中输出消息。
最后，我们需要在路由中将控制器和视图绑定起来：
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/socketrrreee
채팅 방에 참여하고 이벤트를 수신하면 채팅 메시지 이벤트를 다른 클라이언트에게 브로드캐스트합니다. 연결이 끊어지면 서버는 disconnection 이벤트를 트리거합니다. 다음으로 실시간 데이터를 수신하려면 index라는 뷰를 만들고 JavaScript 코드를 사용하여 Socket.io 서버에 연결해야 합니다. 🎜rrreee🎜JavaScript 코드에서 다음을 사용합니다. io() 함수는 서버에 연결됩니다. 연결이 성공하면 콘솔에 메시지가 출력됩니다. 채팅 메시지 이벤트가 수신되면 메시지를 표시하기 위해 페이지에 새로운 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 추가합니다. 또한 연결이 끊어지면 콘솔에 메시지를 인쇄합니다. 🎜🎜마지막으로 경로의 컨트롤러와 뷰를 바인딩해야 합니다. 🎜rrreee🎜이제 Beego 애플리케이션을 시작하고 http://localhost:8080/를 방문하여 결과를 확인할 수 있습니다. http://localhost:8080/socket에서 새 탭을 열면 서버에 연결되어 실시간 데이터 수신이 시작됩니다. 탭 중 하나에 메시지를 입력하면 다른 탭이 실시간으로 업데이트됩니다. 🎜🎜결론적으로 WebSocket과 Socket.io를 사용하면 웹 애플리케이션의 데이터를 더 편리하게 표시하는 데 도움이 됩니다. Beego에서 WebSocket과 Socket.io를 사용하는 것도 매우 간단하며, 실시간 업데이트 기능을 구현하는 데는 소량의 코드만 필요합니다. 🎜위 내용은 웹 애플리케이션 데이터를 표시하는 새로운 방법 - Beego에서 WebSocket 및 Socket.io 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!