使用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.