gin+vue如何使用websocket

gin中的Api代码：

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>

2020年11月22日13:26:56 add

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

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