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

 

转载于:https://www.cnblogs.com/w3liu/p/10590779.html