websocket 全双工通信5分钟看懂

websocket 全双工通信5分钟看懂

前端直接实例化WebSocket对象，上代码

<template>
	<view>
		<button @click="send">发消息</button>
	</view>
</template>

<script>
	export default {
    data () {
        return {
            path:"ws://192.168.1.200:8085/ID=1",//后台配置连接地址，正式地址要换域名，
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket接收的消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        //接收后台发出的消息
        getMessage: function (msg) {
          console.log(msg.data)
          //返回的数据是字符串，需要用JSON转换
		  //第一次连接成功会返回“连接成功‘直接转换会报错，所以要做个判定再转换
		  if (data.data.indexOf("连接成功") < 0) {
            let obj = JSON.parse(data.data);
          } 
        },
        send: function () {
			//设置计时器发出消息防止nginx中断(nginx配置有个存活时间,过了时间未检测到有请求将判定断开)
            setTime(()=>{
            this.socket.send('我还活着')
            },10000)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
	}
</script>

注意事项

  <!-- 启用csp安全无法连接ws -->
  <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> -->