前言
使用go语言开发web服务器时，常常需要web端发送请求给服务端，如果碰到需要长连接的情况，服务端处理http请求往往占用大量资源，而websocket则能使web端和服务端维持长连接。除此之外，建立长连接亦可以使服务端主动向web端推送消息，从而为项目提供更加丰富的功能。
本文面向初次使用go开发web服务端的读者，建立并完成一个完整的web端与服务端实时通信项目。并在文章末尾贴出了开发中的踩坑点，供初学者参考。
环境
OS：Windows 10 专业版（21H1）
编辑器：vscode
服务端：Go（1.17）
web端：HTML5+JavaScript
浏览器：Edge
正文
目标：
web端发起websocket连接，服务端侦听到连接，并处理前端的请求。
背景：
JavaScript完全支持完整的websocket通信，仅需要使用相应函数即可实现通信需求；
golang对websocket无原生支持，需要以将通信发起之初的http连接升级为websocket连接，其原理相关介绍很多，由于需求场景很多，golang有维护较好的第三方库可供方便使用，本文仅针对需快速实现连接功能需求的读者参考。
前端
目标：
一个显示服务器时间的段落，一个触发websocket连接的按钮
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>TestWebsocket</title>
<script type="text/javascript">
function LinkServer() {
// 声明连接
var Server_Com;
if ("WebSocket" in window) {
Server_Com = new WebSocket("ws://127.0.0.1:13000/getTime");
console.log("新建连接到->127.0.0.1:13000");
}
// 建立连接后发送
Server_Com.onopen = function() {
Server_Com.send("Hello Server!"); // Web Socket 已连接上，使用 send() 方法发送数据
console.log("已连接上服务器");
}
// 接收服务器消息
Server_Com.onmessage = function(event) {
var recv_msg = event.data;
if (recv_msg == "Hello Client!") {
console.log("接收到服务器的问候: " + recv_msg); // 用于提示收到信息
} else {
document.getElementById("Time").textContent = recv_msg; // 实时更新显示服务器发回的时间
console.log("接收到服务器数据: " + recv_msg);
}
}
}
</script>
</head>
<body>
<p>服务器时间:</p>
<p id="Time">2022-03-02 20:00:00</p>
<button onclick="LinkServer()">连接</button>
</body>
</html>按F12可显示console.log内容。
服务器
目标：
监听web发来的请求，升级为websocket通讯协议，发送打招呼信息，循环发送当前时间
golang的官方websocket库未得到很好的维护，且功能及稳定性不如第三方开源的gorilla
golang原生支持http连接，websocket连接从http连接升级而来，每次创建websocket连接前，需要首先升级在http连接上，之后可维持websocket连接。
golang需要使用http.HandleFunc来开启http监听，它将在收到http请求后执行函数。同时，升级websocket连接也需要在函数开始执行后才能创建。所以在go中会有net/http包来分配及启动监听，gorrila/websocket包来创建websocket连接。
代码：
package main
import (
"fmt"
"net/http"
"time"
"./websocket-master" // "github.com/gorrila/websocket"连接不上,我直接下载了源码
)
var upgrader = websocket.Upgrader{
// 解决跨域问题
CheckOrigin: func(r *http.Request) bool {
return true
},
}
func main() {
// 注册服务器事件
http.HandleFunc("/getTime", SendTime) // 支持多端同时访问,相当于收到不同请求后未每个请求分别创建线程处理
fmt.Println("已向 DefaultServeMux 注册 SendTime 事件")
// 打开要侦听的前端请求连接端口
err := http.ListenAndServe(":13000", nil) // 这里是接受对本机所有的通过13000的请求,本机有多个IP则可在端口号前加IP地址区分,如"10.11.100.123:13000"
if err != nil {
fmt.Println("端口侦听错误:", err)
}
}
func SendTime(w http.ResponseWriter, r *http.Request) {
c, err := upgrader.Upgrade(w, r, nil)
if err != nil {
fmt.Print("升级websocket连接错误:", err)
return
}
defer c.Close()
// 接受消息
mt, message, err := c.ReadMessage()
if err != nil {
fmt.Println("接收错误:", err)
} else {
fmt.Println("接收到前端消息:", string(message))
// 发送问候
var sendbuff string = "Hello Client!"
c.WriteMessage(mt, []byte(sendbuff)) // 为阅读方便,省去错误处理
// 不停地循环发送时间
fmt.Println("开始发送时间")
for {
sendbuff = time.Now().Format("2006-01-02 15:04:05")
err = c.WriteMessage(mt, []byte(sendbuff))
if err != nil {
fmt.Println("发送错误:", err)
break
}
fmt.Println("发送时间:", sendbuff)
time.Sleep(1 * time.Second) // 间隔1s,降低资源消耗,如果想提高实时性可减少时间间隔
}
fmt.Println("停止发送时间")
}
}
测试
先启动服务器，再打开test.html并打开调试，点击网页上的“连接”按钮，观察控制台与服务器运行窗口（这里是vscode的集成终端）。
浏览器显示
服务器运行
踩坑
问题表现：
- 前端发起请求后没有任何响应
问题细节：
- web端发出了websocket连接请求，浏览器控制台显示failed
- 服务端没有任何提示
问题原因：
web端的websocket参数与服务端不一致，请求的连接没有触发服务端的事件响应
- 服务端的问题代码及修改：
http.HandleFunc("/echo", echo)
// 函数的第一个传入参数为事件名称（从http请求中读取），第二个传入参数为事件
// 事件名称默认为"/"
// 函数格式（附）：
func http.HandleFunc(pattern string, handler func(http.ResponseWriter, *http.Request))- web端的代码：
// 原始代码
Server_Com = new WebSocket("ws://127.0.0.1:12033");
解决：
修改服务端或web端代码均可，以使两端事件统一
- 服务端修改：
// 修改为
http.HandleFunc("/", echo) - web端修改：
// 修改
Server_Com = new WebSocket("ws://127.0.0.1:12033/echo");
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
