如何在springboot中利用socket模拟智能药盒数据并在前端显示

Spring Boot提供了一些简单的方式来实现WebSocket的使用，因此可以使用该功能来进行智能药盒数据的模拟以及实时推送数据到前端。

首先，在Spring Boot中创建一个WebSocket handler的类，该类用于处理WebSocket的相关请求和事件，其中可以定义onOpen、onClose等相关方法。可以使用注解@ServerEndpoint来指定WebSocket的URI地址，如下所示：

@Component
@ServerEndpoint("/medicinebox")
public class MedicineBoxWebSocketHandler {
    private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
    }

    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
    }
  
    // 实现其他自定义的WebSocket方法以及数据模拟的逻辑
}

在该类中，可以定义全局的sessions集合来存储所有连接的WebSocket客户端，同时在onOpen方法中添加当前session到集合中，在onClose方法中从集合中移除当前的session。

接着，在需要模拟数据的地方，可以通过定时任务或者按钮等方式生成模拟数据，并通过sessions集合向所有的WebSocket客户端发送模拟数据，如下所示：

// 定时任务每隔5秒钟向所有的WebSocket客户端发送模拟数据
@Component
public class MedicineBoxTask {
    @Autowired
    private MedicineBoxWebSocketHandler handler;

    @Scheduled(fixedDelay = 5000)
    public void sendMedicineBoxData() {
        // 模拟数据
        Map<String, Object> data = new HashMap<>();
        data.put("medicine", "感冒药");
        data.put("amount", 2);
        data.put("time", LocalDateTime.now());

        // 发送数据到所有WebSocket客户端
        for (Session session : handler.sessions) {
            try {
                session.getBasicRemote().sendText(new Gson().toJson(data));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

最后，在前端页面中通过JavaScript使用WebSocket客户端连接并监听指定的URI地址，如下所示：

var socket = new WebSocket("ws://localhost:8080/medicinebox");
socket.onopen = function() {
    console.log("WebSocket连接成功！");
};
socket.onclose = function() {
    console.log("WebSocket连接关闭！");
};
socket.onmessage = function(event) {
    console.log("收到消息：" + event.data);
    // 处理接收到的数据
};

通过以上实现，在前端页面中可以实时接收到后端推送的智能药盒数据并进行处理及展示。