一. 编写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>