前言

        使用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连接的按钮

代码:

按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连接。

代码:

测试

       先启动服务器,再打开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");