websocket由浅入深二

上一篇我们说了一下websocket的基本概念及简单案例，本篇是一个案例，传输文本类型的文件，可以稍微扩展成大文件上传

前端代码

<template>
  <div>
    连接地址: <input type="text" id="conn" placeholder="ws://tmp.server.com:port/socket" v-model="connAddress"/>
    <button v-on:click="click">连接</button>
    <div>
      <textarea v-model="msg"></textarea>
      <button v-on:click="webSocketSend">发送文本消息</button>
    </div>
    接收到的文本消息：
    <div>
      <textarea v-model="receive"></textarea>
    </div>
    <!--------------------发送文件---------------------------------------------------->
    <!--大文件上传的话，无非就是根据文件的大小进行切分，然后固定每次传输多少字节，然后再服务端进行合并，自己实现吧-->
    <div>
      <input type="file"   @change="webSocketSendFile"/>
    </div>
    <!--img 用来显示服务端发送的图片-->
    收到的图片：<img :src="img" alt="">
  </div>
</template>

<script>
  export default {
    name: 'websocket',
    data() {
      return {
        connAddress: 'ws://localhost:8081/socket',
        msg: '',
        webSocket: null,
        receive: '',
        img: '',
        file: ''
      }
    },
    created() {
      // this.initWebSocket();
    },
    destroyed() {
      this.webSocket.close() //离开路由之后断开websocket连接
    },
    methods: {
      click() {
        this.initWebSocket();
      },
      initWebSocket() {
        this.webSocket = new WebSocket(this.connAddress);
        this.webSocket.onopen = this.webSocketOnOpen();
        this.webSocket.onmessage = this.webSocketOnMessage;
        this.webSocket.onopen = this.webSocketOnOpen;
        this.webSocket.onerror = this.webSocketOnError;
        this.webSocket.onclose = this.webSocketClose;
      },
      webSocketOnOpen(event) { //连接建立之后执行send方法发送数据
        console.log('连接建立', event);
      },
      webSocketOnError(event) {//连接建立失败重连
        console.log('失败', event);
        this.initWebSocket();
      },
      webSocketOnMessage(event) { //数据接收
        //把 event 打印出来 看看里面都有什么东西
        console.log('数据接收', event);
        //如果是图片类型，则显示图片
        if (event.data instanceof Blob){
          const src = window.URL.createObjectURL(event.data);
          this.img = src;
        }else {//文本信息直接输出
          this.receive = event.data;
        }
      },
      webSocketClose(event) {  //关闭
        console.log('断开连接', event);
      },
      webSocketSend() {//数据发送
        console.log(this.msg)
        this.webSocket.send(this.msg);
      },
      webSocketSendFile(e) {//文件数据发送
        let files = e.target.files;
        console.log(files)
        let blob = files[0].slice(0, files[0].size);
        this.webSocket.send(blob);
      },
    }
  }
</script>

<style scoped>
  #conn {
    width: 30%;
  }
  textarea {
    width: 30%;
    height: 50px;
  }
</style>

后端代码

@Configuration
public class WebSocketConfig  implements ServletContextInitializer {
    /**
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

    @Override
    public void onStartup(ServletContext servletContext) {
        servletContext.addListener(WebAppRootListener.class);
        servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","51200000");
        servletContext.setInitParameter("org.apache.tomcat.websocket.binaryBufferSize","51200000");
    }
}

@ServerEndpoint("/socket")
@Component
@Slf4j
public class WebSocketEndpoint {

    public WebSocketEndpoint() {
        log.info("构造方法执行：" + this.hashCode());
    }

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        log.info(" onOpen session=" + session.getId());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        log.info(session.getId() + "：关闭了");
    }

    /**
     * 收到客户端发送的字节消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onBinaryMessage(Session session, byte[] message) {
        log.info("onMessage session=" + session.getId() + " message =" + message.length);
        //群发消息
        //将流写入文件
        saveFileFromBytes(message);
        //文件写入成功，返回一个ok
        session.getAsyncRemote().sendText("文件上传ok");
        //向客户端写图片
        sendFile(session);
    }

    public boolean saveFileFromBytes(byte[] b) {
        //创建文件流对象
        FileOutputStream fstream = null;
        //从map中获取file对象
        File file = new File("E://" + this.hashCode() + ".png");
        //判断路径是否存在，不存在就创建
        if (!file.getParentFile().exists()) {
            file.getParentFile().mkdirs();
        }
        try {
            fstream = new FileOutputStream(file, true);
            fstream.write(b);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        } finally {
            if (fstream != null) {
                try {
                    fstream.close();
                } catch (IOException e1) {
                    e1.printStackTrace();
                }
            }
        }
        return true;
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onTextMessage(Session session, String message) {
        log.info("onMessage session=" + session.getId() + " message =" + message);
        session.getAsyncRemote().sendText("我是服务端：" + message);
    }

    private void sendFile(Session session) {
        byte[] array = null;
        try {
            InputStream resourceAsStream = new ClassPathResource("test.png").getInputStream();
            ByteArrayOutputStream output = new ByteArrayOutputStream();
            byte[] buf = new byte[1024];
            int numBytesRead = 0;
            while ((numBytesRead = resourceAsStream.read(buf)) != -1) {
                output.write(buf, 0, numBytesRead);
            }
            array = output.toByteArray();
            output.close();
            resourceAsStream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        ByteBuffer data = ByteBuffer.wrap(array);
        session.getAsyncRemote().sendBinary(data);
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("onError");
    }
}