vue项目使用websocket技术

　　

1、为何须要websocket？

　　前端和后端的交互模式最多见的就是前端发数据请求，从后端拿到数据后展现到页面中。若是前端不作操做，后端不能主动向前端推送数据，这也是http协议的缺陷。

　　所以，一种新的通讯协议应运而生---websocket，他最大的特色就是服务端能够主动向客户端推送消息，客户端也能够主动向服务端发送消息，实现了真正的平等。

websocket其余特色以下：

（1）创建在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，而且握手阶段采用 HTTP 协议，所以握手时不容易屏蔽，能经过各类 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通讯高效。

（4）能够发送文本，也能够发送二进制数据。

（5）没有同源限制，客户端能够与任意服务器通讯。

（6）协议标识符是ws（若是加密，则为wss），服务器网址就是 URL。

 

2、vue项目如何引用websocket？

 

vue使用websocket须要注意如下几点：

（1）首先须要判断浏览器是否支持websocket，关于如何解决兼容性问题能够参考 这里这里

 

（2）在组件加载的时候链接websocket，在组件销毁的时候断开websocket

（3）后端接口须要引入socket模块，不然不能实现链接

 

不废话了，直接附上完整代码：

 

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

<script>
export default {
    data () {
        return {
            path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
            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)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>