gin+vue 使用 websocket

package myws

import (
	"fmt"
	"log"
	"net/http"
	"time"

	"github.com/gin-gonic/gin"
	"github.com/gorilla/websocket"
)
var (
	upgrader = websocket.Upgrader{
		ReadBufferSize:   1024,
		WriteBufferSize:  1024,
		CheckOrigin:      func(r *http.Request) bool { return true },
		HandshakeTimeout: time.Duration(time.Second * 5),
	}
)
func SocketLink(c*gin.Context){
	conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
	if err != nil {
		log.Println("cant upgrade connection:", err)
		return
	}
	var i = 0
	for {
		msgType, msgData, err := conn.ReadMessage()
		if err != nil {
			log.Println("cant read message:", err)
		}
        log.Printf("recv message: %s\n", msgData)
		conn.WriteMessage(msgType,[]byte(fmt.Sprintf("%d",i++)))
	}
}

前台vue页面配置：

<template>
  <div>
    <button @click="link">点击</button>
    <input v-model="msg" readonly />
  </div>
</template>
 
<script>
 
export default {
  name: "Test",
  data() {
    return {
      url:'',
      ws:null,
      msg:'',
    };
  },
  created() {
    this.url = "ws://127.0.0.1:xxxx/ws/socketLink"  
  },
  mounted(){
    var that = this
    //连接打开时触发 
    var ws = new WebSocket(this.url)
    that.ws = ws
    that.ws.onopen = function() {  
        console.log("Connection open ...");  
    };  
      //接收到消息时触发  
    that.ws.onmessage = function(evt) {  
        console.log("Received Message: " + evt.data); 
        that.msg = evt.data
    };  
    //连接关闭时触发  
    that.ws.onclose = function() {  
        console.log("Connection closed.");  
    };
  },
  methods: {
    link(){
      this.ws.send("Hello WebSockets!")
      //this.link()
    },
  },
};
</script>

关于JWT验证token的问题，可以在创建websocket链接是在url地址追加参数，获取头参数中token为空的情况下,判断url地址追加的token信息,进而验证token

token := c.Request.Header.Get("x-token")
if token ==""{
    token = c.Query("x-token")
}

gin
github地址：https://github.com/gin-gonic/gin

安装gin的代码包

go get github.com/gin-gonic/gin

package main  
 
import (  
   "github.com/gin-gonic/gin"  
)  
 
func main() {  
   bindAddress := "localhost:2303"  
   r := gin.Default()  
   //监听 get请求  /test路径
   r.GET("/test", func(c *gin.Context) {  
      c.JSON(200,[]string{"123", "321"})  
   })  
   r.Run(bindAddress)  
}

2. gorilla
   gorilla拥有很多类库，这次我们使用的是它的webSocket

go get github.com/gorilla/websocket
package main  
 
import (  
   "github.com/gin-gonic/gin"  
   "github.com/gorilla/websocket" 
   "net/http"
)  
 
 
var upGrader = websocket.Upgrader{  
   CheckOrigin: func (r *http.Request) bool {  
      return true  
   },  
}  
 
//webSocket请求ping 返回pong  
func ping(c *gin.Context) {  
   //升级get请求为webSocket协议
   ws, err := upGrader.Upgrade(c.Writer, c.Request, nil)  
   if err != nil {  
      return  
   }  
   defer ws.Close()  
   for {
      //读取ws中的数据  
      mt, message, err := ws.ReadMessage()  
      if err != nil {  
         break  
      }  
      if string(message) == "ping" {  
         message = []byte("pong")  
      }  
      //写入ws数据
      err = ws.WriteMessage(mt, message)  
      if err != nil {  
         break  
      }  
   }  
}  
 
func main() {  
   bindAddress := "localhost:2303"  
   r := gin.Default()  
   r.GET("/ping", ping)  
   r.Run(bindAddress)  
}

3.前端js代码

<script>
var ws = new WebSocket("ws://localhost:2303/ping");  
//连接打开时触发 
ws.onopen = function(evt) {  
    console.log("Connection open ...");  
    ws.send("Hello WebSockets!");  
};  
//接收到消息时触发  
ws.onmessage = function(evt) {  
    console.log("Received Message: " + evt.data);  
};  
//连接关闭时触发  
ws.onclose = function(evt) {  
    console.log("Connection closed.");  
};  
 
</script>