golang vue 使用 websocket 的例子

一. 编写golang服务端

 1.导入必要的websocket包，golang.org/x/net/websocket 或 github.com/golang/net/websocket

 2.编写消息处理函数，主要实现接收客户端发送的消息和向客户端发送消息

 

func Handle(conn *websocket.Conn) {
   defer conn.Close()
   jsonHandler := websocket.JSON
   userInfo := &UserInfo{}
   res := &Response{
      Code: 1,
      Msg:  "success",
   }
   go Push(conn)
   for {
      err := jsonHandler.Receive(conn, userInfo)
      if err != nil {
         fmt.Println(err)
         break
      }
      jsonData, _ := json.Marshal(userInfo)
      fmt.Println("receive data:", string(jsonData[:]))
      err = jsonHandler.Send(conn, res)
      if err != nil {
         fmt.Println(err)
         break
      }
   }
}

 3.绑定地址及端口

package main

import (
   "fmt"
   "golang.org/x/net/websocket"
   "net/http"
   "w3liu.com/websocket/handler"
)

func main() {
   http.Handle("/ws", websocket.Handler(handler.Handle))
   err := http.ListenAndServe(":88", nil)
   if err != nil {
      fmt.Println(err)
   }
}

 

二、编写VUE客户端

  

<template>

<div>

{{msg}}

</div>

</template>

<script>

export default {

data () {

return {

websock: null,

msg: ''

}

},

methods: {

init: function () {

const wsurl = 'ws://127.0.0.1:88/ws'

this.websock = new WebSocket(wsurl)

this.websock.onmessage = this.onmessage

this.websock.onopen = this.onopen

this.websock.onerror = this.onerror

this.websock.onclose = this.onclose

},

onopen: function () {

this.send('{"userid":1, "name":"zhang san", "age":"30"}')

},

send: function (data) {

for (var i = 0; i < 10; i++) {

this.websock.send(data)

}

},

onclose: function (e) {

console.log('ws close', e)

},

onmessage: function (e) {

let _this = this

console.log(e.data)

_this.msg = e.data

},

onerror: function () {

console.log('ws error')

this.init()

}

},

mounted: function () {

this.init()

},

watch: {

}

}

</script>

 

 完整源码访问：https://github.com/w3liu/websocket