spring boot 使用WebSocket与前端进行byte字节数组交互

一、装逼前先热热身

无论是比较传统的 web项目 还是近几年流行的前后端分离，后端只独立提供数据交互接口服务的项目，都避免不了数据之间交互格式的选择。

• 从很早之前的 xml 格式
• 到现在最火热的json格式

我们可以发现数据格式都是越来越 “短小精悍” 。当然我们可能在某些特定的业务场合，比如对延时要求特别高的场景

• H5多人对战类型游戏
• 实时的数据信息交互场景 语音聊天、以及难度更高的视频聊天等

或者对传输数据大小有一定限制的业务场所；那么这时候我们就可以使用websocket 进行信息数据的交互；不过使用传统的websocket +json字符串的方式来进行数据交互的话，无论是网络带宽的占用以及响应的时间上来说都比不上使用byte字节数组交互数据的方式；当然，对于很早之前的web前端，并不能很好的处理byte字节数组，不过随着H5的到来我们在JavaScript上也可以很好的对二进制数据进行操作

二、具体实现步骤

1. spring boot 依赖加入
2. WebSocket config配置
3. WebSocket接口类简单实现
4. 前端JavaScript具体实现

• 1、spring boot 依赖加入

    
        org.springframework.boot
        spring-boot-starter-websocket
    

• 2、 WebSocket config配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter; 
@Configuration
public class WebConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

• 3. WebSocket接口类简单实现

package com.example.demo;

import org.springframework.stereotype.Component;
import java.nio.ByteBuffer;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;

/**
 * @ServerEndpoint
 * 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint(value="/websocket")
@Component
public class WebSocketTest {
    @OnOpen
    public void onOpen(Session session){ System.out.println("加入连接");  }

    @OnClose
    public void onClose(){ System.out.println("关闭连接");  }

    @OnError
    public void onError(Session session, Throwable error){  
       System.out.println("发生错误");
       error.printStackTrace(); 
    }

    /**
     * 收到客户端消息后调用的方法
     * @param messages 客户端发送过来的消息
     * @param session 可选的参数
     */
    @OnMessage
    public void onMessage(byte[] messages, Session session) {
        try {
            System.out.println("接收到消息:"+new String(messages,"utf-8"));
            //返回信息
            String resultStr="{name:\"张三\",age:18,addr:\"上海浦东\"}";
            //发送字符串信息的 byte数组
            ByteBuffer bf=ByteBuffer.wrap(resultStr.getBytes("utf-8"));
            session.getBasicRemote().sendBinary(bf);
            //发送字符串
            //session.getBasicRemote().sendText("测试");
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }
} 

• 4. 前端JavaScript具体实现

 


    
    发送消息 
    




 

三、效果展示

• 连接状态
  
  image.png
  
  
  image.png
  
  
  image.png

不过目前这只是一个特别简单的demo，对于websocket的使用并不在本文中进行详细的讲解， 只是将这样一种思路进行简单的实现；