使用websocket实现浏览器与服务端进行双向通信（Vue springboot）

一、websocket介绍

通常服务端想主动给前端推送信息的话，需要使用轮询技术，即在特定的时间间隔（比如每1秒），浏览器通过调用服务端的接口向服务端发送http请求，服务端将最新的数据发送给浏览器。这种方式在性能上有明显的缺点，即浏览器需要不断向服务器发送请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然会浪费很多的宽带资源。

而HTML5的websocket协议可以解决该性能问题，减少浏览器和服务器建立连接的次数，减少系统资源开销，实现更实时的双向通信。

websocket是在单个TCP连接上进行全双工通讯的协议，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。这也避免了http的非状态性，服务端会一直与客户端保持连接，直到你关闭请求。此外，还可以实现更好的二进制支持、支持扩展、更好的压缩效果等这些优点。

 

 

二、vue使用websocket

（1）首先判断浏览器是否支持websocket

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

<template>
    <div>
        <button @click="send">给服务器发送消息</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            path: 'ws://192.168.*.*:8082/socketServer',
            socket:""
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init() {
            if(typeof(WebSocket) === "undefined"){
                alert("抱歉，您的浏览器不支持socket。")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path + '?token='+ localStorage.getItem("Authorization"))
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open() {
            console.log("socket连接成功")
        },
        error() {
            console.log("连接错误")
        },
        getMessage(msg) {
            console.log(msg.data)
        },
        send() {
            this.socket.send(params)
        },
        close () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>

 

三、服务端配置