java后端+前端使用WebSocket实现消息推送和保存消息

对于保存消息，可以使用数据库来存储历史消息，例如使用MySQL或者MongoDB等数据库。可以创建一个消息实体类，将消息内容、发送者、接收者、发送时间等信息存储到数据库中。

在Java后端的WebSocketHandler实现类中，当接收到WebSocket消息时，可以将消息保存到数据库中。可以使用JPA或者MyBatis等框架来操作数据库。具体实现步骤如下：

1. 创建一个消息实体类，例如：

@Entity
@Table(name = "message")
public class Message {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "content")
    private String content;

    @Column(name = "sender")
    private String sender;

    @Column(name = "receiver")
    private String receiver;

    @Column(name = "send_time")
    private Date sendTime;

    // getters and setters
}

2. 在WebSocketHandler实现类中，当接收到WebSocket消息时，可以将消息保存到数据库中。例如：

@Component
public class MyWebSocketHandler implements WebSocketHandler {
    @Autowired
    private MessageRepository messageRepository;

    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        String content = message.getPayload().toString();
        String sender = (String) session.getAttributes().get("sender");
        String receiver = (String) session.getAttributes().get("receiver");
        Date sendTime = new Date();
        Message msg = new Message();
        msg.setContent(content);
        msg.setSender(sender);
        msg.setReceiver(receiver);
        msg.setSendTime(sendTime);
        messageRepository.save(msg); // 将消息保存到数据库中
        // 处理消息并向客户端发送响应消息
    }
}

3. 在消息列表页面中，可以从数据库中查询历史消息并显示在页面上。例如：

@Controller
public class MessageController {
    @Autowired
    private MessageRepository messageRepository;

    @GetMapping("/messages")
    public String listMessages(Model model) {
        List<Message> messages = messageRepository.findAll();
        model.addAttribute("messages", messages);
        return "messages";
    }
}

4. 在前端的WebSocket对象上，可以通过监听onmessage事件，在接收到WebSocket消息后将消息显示在页面上。例如：

var ws = new WebSocket("ws://localhost:8080/ws");
ws.onmessage = function(event) {
    var message = event.data;
    // 将消息显示在页面上
};

这样就可以实现Java后端和前端之间的WebSocket消息推送和保存消息了。需要注意的是，在实际应用中还需要处理WebSocket连接的异常情况、消息的格式和安全性等问题。同时，还需要考虑如何对历史消息进行分页和排序等操作。