go后端代码
安装模块
go get "github.com/gorilla/websocket"
main.go
代码如下:
package mainimport ("fmt""github.com/gorilla/websocket""net/http"
)var upgrader = websocket.Upgrader{CheckOrigin: func(r *http.Request) bool {// 允许所有来源的WebSocket连接return true},
}func main() {http.HandleFunc("/ws", wsHandle)err := http.ListenAndServe(":9009", nil)if err != nil {fmt.Println(err)}
}func wsHandle(w http.ResponseWriter, r *http.Request) {// 升级为wsconn, err := upgrader.Upgrade(w, r, nil)if err != nil {fmt.Println(err)return}defer conn.Close()fmt.Println("连接建立成功")// 循环监听客户端传来的消息for {// 读取客户端消息messageType, p, err := conn.ReadMessage()if err != nil {fmt.Println(err)return}// 处理消息fmt.Println("接收到客户端的消息为: ", string(p))// 发送消息给客户端err = conn.WriteMessage(messageType, p)//err = conn.WriteMessage(messageType, []byte("我是服务器返回的消息"))if err != nil {fmt.Println(err)return}}
}
运行项目(右键运行)
项目运行地址为: ws://127.0.0.1:9009/ws
前端测试demo页面代码如下
也可以使用这个网站测试webSocket代码:http://www.websocket-test.com/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket 连接测试</title>
<style>#log {margin-top: 20px;border: 1px solid #ccc;padding: 10px;height: 500px;overflow-y: scroll;}
</style>
</head>
<body><h2>WebSocket 连接测试页面</h2><button id="connect">连接</button>
<input type="text" autocomplete="off" id="address" value="ws://127.0.0.1:9009/ws" placeholder="输入webSocket地址...">
<button id="disconnect" disabled>断开连接</button>
<button id="send" disabled>发送消息</button><input type="text" autocomplete="off" id="message" placeholder="输入消息...">
<div id="log"></div><script>var ws;var log = document.getElementById('log');function logMessage(message) {var p = document.createElement('p');p.textContent = message;log.appendChild(p);// 确保日志始终显示在底部log.scrollTop = log.scrollHeight;}document.getElementById('connect').addEventListener('click', function() {if ('WebSocket' in window) {ws = new WebSocket(document.getElementById('address').value);ws.onopen = function() {logMessage('已连接到WebSocket服务器。');document.getElementById('connect').disabled = true;document.getElementById('disconnect').disabled = false;document.getElementById('send').disabled = false;};ws.onmessage = function(event) {logMessage('接收到消息:' + event.data);};ws.onclose = function(event) {if (event.wasClean) {logMessage('连接已干净地关闭。');} else {logMessage('连接已断开。');}logMessage('代码:' + event.code + ', 原因:' + event.reason);document.getElementById('connect').disabled = false;document.getElementById('disconnect').disabled = true;document.getElementById('send').disabled = true;};ws.onerror = function(error) {logMessage('WebSocket错误:' + JSON.stringify(error));};} else {// 浏览器不支持WebSocketlogMessage('你的浏览器不支持WebSocket。');}});document.getElementById('disconnect').addEventListener('click', function() {ws.close();});document.getElementById('send').addEventListener('click', function() {var message = document.getElementById('message').value;ws.send(message);logMessage('发送消息:' + message);});
</script></body>
</html>