Websocket协议
下面使用一个简单的例子来演示Websocket协议的使用。
服务端
服务端使用go + gin进行开发。
step1 安装必要的依赖:
go get -u github.com/gin-gonic/gin
go get -u github.com/gorilla/websocket
step2 编写客户端代码:
// server.go
package main
import (
"github.com/gin-gonic/gin"
"github.com/gorilla/websocket"
"log"
"net/http"
"time"
)
var upgrader = websocket.Upgrader{
ReadBufferSize: 1024,
WriteBufferSize: 1024,
CheckOrigin: func(r *http.Request) bool {
return true
},
}
func wsHandler(c *gin.Context) {
conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
if err != nil {
log.Println("upgrade error:", err)
return
}
defer conn.Close()
ticker := time.NewTicker(5 * time.Second)
defer ticker.Stop()
for {
select {
case <-ticker.C:
message := "Hello from server!" + time.Now().Format("2006-01-02 15:04:05")
conn.WriteMessage(websocket.TextMessage, []byte(message))
if err != nil {
log.Println("write message error:", err)
return
}
}
}
}
func main() {
r := gin.Default()
r.GET("/ws", wsHandler)
r.Run(":8080")
}
客户端
客户端使用vue进行编写,代码如下:
// App.vue
<template>
<div id="app">
<h1>WebSocket Demo</h1>
<p>从服务端接收到消息:</p>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
ws: null,
messages: [],
};
},
created() {
this.connectWebSocket();
},
methods: {
connectWebSocket() {
this.ws = new WebSocket("ws://localhost:8080/ws");
this.ws.onmessage = (event) => {
this.messages.push(event.data);
};
this.ws.onclose = () => {
console.log("Websocket连接已经关闭,尝试重新连接");
setTimeout(this.connectWebSocket, 3000); // 3秒后重连
};
},
},
beforeDestroy() {
if (this.ws) {
this.ws.close();
}
},
};
</script>
运行结果
1、服务端代码使用go run server.go运行。
2、客户端使用npm run serve运行。
3、页面上每隔5秒就会收到一条信息,实际效果如下所示:

1377

被折叠的 条评论
为什么被折叠?



