当使用Gin框架实现WebSocket服务器的Go部分时，你需要在项目中导入github.com/gin-gonic/gin和github.com/gorilla/websocket这两个包。以下是使用Gin框架编写的示例代码：
package main
import (
"log"
"net/http"
"github.com/gin-gonic/gin"
"github.com/gorilla/websocket"
)
var upgrader = websocket.Upgrader{
CheckOrigin: func(r *http.Request) bool {
return true
},
}
func main() {
r := gin.Default()
r.GET("/ws", func(c *gin.Context) {
// 升级HTTP连接为WebSocket连接
conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
if err != nil {
log.Println("Failed to upgrade WebSocket connection:", err)
return
}
defer conn.Close()
for {
// 读取客户端发送的消息
_, msg, err := conn.ReadMessage()
if err != nil {
log.Println("Failed to read message:", err)
break
}
log.Printf("Received message: %s\n", msg)
// 发送消息给客户端
err = conn.WriteMessage(websocket.TextMessage, msg)
if err != nil {
log.Println("Failed to write message:", err)
break
}
}
})
log.Println("Server started on http://localhost:8080")
log.Fatal(http.ListenAndServe(":8080", r))
}
在这个示例中，我们使用Gin框架创建了一个路由组，并定义了/ws路径的GET请求处理函数。在该处理函数中，我们将HTTP连接升级为WebSocket连接。然后，我们循环读取来自客户端的消息，并将其原样发送回客户端。
确保在运行代码之前，使用以下命令安装所需的包：
go get github.com/gin-gonic/gin
go get github.com/gorilla/websocket
运行以上代码后，WebSocket服务器将在http://localhost:8080上启动，并监听/ws路径上的WebSocket连接请求。
请注意，示例代码中使用了gin.Default()创建了一个默认的Gin路由引擎，你可以根据需要进行进一步的自定义和路由定义。
好的，以下是HTML代码，其中添加了一个输入框和一个提交按钮，点击提交按钮后将输入框中的内容作为消息发送到服务器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Client</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="输入消息">
<button id="sendButton">发送</button>
<script>
const socket = new WebSocket('ws://localhost:8080/ws');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
// 连接建立时触发
socket.onopen = function(event) {
console.log('WebSocket 连接已建立');
};
// 收到消息时触发
socket.onmessage = function(event) {
const message = event.data;
console.log('收到消息:', message);
};
// 连接关闭时触发
socket.onclose = function(event) {
console.log('WebSocket 连接已关闭');
};
// 发生错误时触发
socket.onerror = function(event) {
console.error('WebSocket 错误:', event);
};
// 发送消息
function sendMessage() {
const message = messageInput.value;
if (socket.readyState === WebSocket.OPEN && message) {
socket.send(message);
console.log('发送消息:', message);
messageInput.value = '';
} else {
console.error('WebSocket 连接尚未建立或消息为空');
}
}
// 点击提交按钮时发送消息
sendButton.addEventListener('click', sendMessage);
</script>
</body>
</html>
这个修改后的代码在原有的基础上添加了一个输入框和一个提交按钮。当用户在输入框中输入消息并点击提交按钮时，将触发sendMessage函数，该函数将获取输入框中的消息并发送到服务器。同时，还添加了一些逻辑，例如清空输入框的内容和防止发送空消息。你可以根据需要进行进一步的自定义和样式修改。
网友评论