技术栈
- Java
- Spring Boot
- WebSocket
- HTML、CSS、JavaScript
项目架构
我们将使用Spring Boot作为后端框架来构建这个聊天应用程序，并使用WebSocket协议来实现实时通信。前端部分则使用HTML、CSS和JavaScript来实现。
项目结构如下：
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── example
│ │ │ └── chatapp
│ │ │ ├── ChatAppApplication.java
│ │ │ ├── config
│ │ │ │ └── WebSocketConfig.java
│ │ │ └── controller
│ │ │ └── ChatController.java
│ │ └── resources
│ │ ├── static
│ │ │ └── index.html
│ │ └── application.properties
│ └── test
│ └── java
│ └── com
│ └── example
│ └── chatapp
│ └── ChatAppApplicationTests.java
└── pom.xml
后端实现
- 创建Spring Boot项目，并添加所需的依赖。
<!-- pom.xml -->
<dependencies>
<!-- Spring Boot Starter -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
</dependencies>
- 配置WebSocket。
// WebSocketConfig.java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.setApplicationDestinationPrefixes("/app");
registry.enableSimpleBroker("/topic");
}
}
- 创建控制器处理WebSocket请求。
// ChatController.java
@Controller
public class ChatController {
@MessageMapping("/chat")
@SendTo("/topic/messages")
public Message sendMessage(Message message) {
return message;
}
}
前端实现
- 创建前端页面。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat App</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="messages"></div>
<input id="input-message" type="text" placeholder="Type your message..." />
<button id="send-button">Send</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script src="app.js"></script>
</body>
</html>
- 编写JavaScript代码连接WebSocket。
// app.js
var stompClient = null;
function connect() {
var socket = new SockJS('/chat');
stompClient = Stomp.over(socket);
stompClient.connect({
}, function(frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/messages', function(message) {
showMessage(JSON.parse(message.body).content);
});
});
}
function sendMessage() {
var input = document.getElementById('input-message');
var message = {
content: input.value };
stompClient.send("/app/chat", {
}, JSON.stringify(message));
input.value = '';
}
function showMessage(message) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(message));
document.getElementById('messages').appendChild(div);
}
connect();
document.getElementById('send-button').addEventListener('click', sendMessage);
运行
使用命令行或IDE编译和运行后端代码。
打开浏览器，访问
http://localhost:8080。在多个浏览器窗口中打开该链接，开始聊天！
结论
本文介绍了如何使用Java编写一个基于Web的聊天应用程序。通过使用Spring Boot和WebSocket技术，我们能够实现实时通信功能，满足用户对即时聊天的需求。希望这篇博客对你有所帮助！
