当前位置: 首页 > wzjs >正文

网站维护页面怎么做的如何免费推广网站

网站维护页面怎么做的,如何免费推广网站,网站内链建设,网站做签到功能一、前言 最近在学习WebSocket技术,做了一个简单的聊天室Demo。这个项目虽然不大,但涵盖了WebSocket的核心功能实现。下面我将详细介绍这个聊天室的实现过程,希望能帮助到同样想学习WebSocket的朋友们。 二、技术选型 后端:Spri…

一、前言

最近在学习WebSocket技术,做了一个简单的聊天室Demo。这个项目虽然不大,但涵盖了WebSocket的核心功能实现。下面我将详细介绍这个聊天室的实现过程,希望能帮助到同样想学习WebSocket的朋友们。

二、技术选型

  • 后端:Spring Boot + WebSocket

  • 前端:SockJS + STOMP.js

  • 通信协议:STOMP(简单的面向文本的消息协议)

三、后端实现

1. WebSocket配置类

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {// 设置消息代理前缀config.enableSimpleBroker("/topic");// 设置应用目的地前缀config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 注册WebSocket端点registry.addEndpoint("/ws").setAllowedOriginPatterns("*").withSockJS(); // 支持SockJS}
}

2. 消息处理控制器

@Controller
public class WebSocketController {@MessageMapping("/hello")@SendTo("/topic/greetings")public String greeting(String message) {System.out.println("收到消息: " + message);return message;}
}

四、前端实现

完整代码:
 

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title>WebSocket Chat Demo</title><script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.6.1/dist/sockjs.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script><style>:root {--primary-color: #4CAF50;--secondary-color: #45a049;--error-color: #f44336;--border-color: #ddd;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;background-color: #f9f9f9;}h1 {color: #333;text-align: center;margin-bottom: 20px;}#chat-container {background-color: white;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);overflow: hidden;}#message-container {height: 400px;overflow-y: auto;padding: 15px;border-bottom: 1px solid var(--border-color);background-color: #fafafa;}.message {margin-bottom: 12px;padding: 10px 15px;border-radius: 18px;max-width: 70%;word-wrap: break-word;animation: fadeIn 0.3s ease;}.user-message {background-color: var(--primary-color);color: white;margin-left: auto;border-bottom-right-radius: 4px;}.server-message {background-color: #e5e5ea;color: black;margin-right: auto;border-bottom-left-radius: 4px;}#status {padding: 10px 15px;background-color: #f8f8f8;font-size: 14px;color: #666;text-align: center;border-bottom: 1px solid var(--border-color);}#message-form {display: flex;padding: 15px;background-color: white;}#message-input {flex-grow: 1;padding: 12px;border: 1px solid var(--border-color);border-radius: 4px;font-size: 16px;outline: none;transition: border 0.3s;}#message-input:focus {border-color: var(--primary-color);}#send-btn {padding: 12px 20px;margin-left: 10px;background-color: var(--primary-color);color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;}#send-btn:hover {background-color: var(--secondary-color);}#send-btn:disabled {background-color: #cccccc;cursor: not-allowed;}@keyframes fadeIn {from { opacity: 0; transform: translateY(5px); }to { opacity: 1; transform: translateY(0); }}.connection-status {display: inline-block;width: 10px;height: 10px;border-radius: 50%;margin-right: 5px;}.connected {background-color: var(--primary-color);}.disconnected {background-color: var(--error-color);}.timestamp {font-size: 12px;color: #999;margin-top: 4px;text-align: right;}</style>
</head>
<body>
<h1>WebSocket Chat Demo</h1><div id="chat-container"><div id="status"><span id="connection-status" class="connection-status disconnected"></span><span id="status-text">正在连接服务器...</span></div><div id="message-container"></div><form id="message-form"><input type="text" id="message-input" placeholder="输入消息..." autocomplete="off" autofocus><button type="submit" id="send-btn" disabled>发送</button></form>
</div><script>// 全局变量const socket = new SockJS('http://localhost:8080/ws');const stompClient = Stomp.over(socket);let username = '用户' + Math.floor(Math.random() * 1000);// DOM元素const messageContainer = document.getElementById('message-container');const messageForm = document.getElementById('message-form');const messageInput = document.getElementById('message-input');const sendBtn = document.getElementById('send-btn');const statusText = document.getElementById('status-text');const connectionStatus = document.getElementById('connection-status');// 初始化连接function connect() {updateStatus('正在连接服务器...', 'disconnected');// 禁用调试信息(生产环境)stompClient.debug = null;stompClient.connect({},function(frame) {onConnectSuccess(frame);},function(error) {onConnectError(error);});}// 连接成功回调function onConnectSuccess(frame) {updateStatus('已连接', 'connected');sendBtn.disabled = false;// 订阅消息stompClient.subscribe('/topic/greetings', function(response) {const message = JSON.parse(response.body);// 检查是否是自己的消息if (message.username !== username) {showMessage(`${message.username}: ${message.content}`, 'server-message');}});// 发送欢迎消息sendSystemMessage(`${username} 加入了聊天室`);}// 连接错误回调function onConnectError(error) {console.error('连接错误:', error);updateStatus('连接失败,5秒后重试...', 'disconnected');sendBtn.disabled = true;// 5秒后自动重连setTimeout(connect, 5000);}// 更新状态显示function updateStatus(text, status) {statusText.textContent = text;connectionStatus.className = 'connection-status ' + status;}// 显示消息function showMessage(content, messageType) {const messageElement = document.createElement('div');messageElement.className = `message ${messageType}`;const contentElement = document.createElement('div');contentElement.textContent = content;const timestampElement = document.createElement('div');timestampElement.className = 'timestamp';timestampElement.textContent = new Date().toLocaleTimeString();messageElement.appendChild(contentElement);messageElement.appendChild(timestampElement);messageContainer.appendChild(messageElement);messageContainer.scrollTop = messageContainer.scrollHeight;}// 发送用户消息function sendUserMessage() {const content = messageInput.value.trim();if (!content) return;// 显示用户消息showMessage(content, 'user-message');// 发送到服务器stompClient.send("/app/hello",{},JSON.stringify({username: username,content: content,timestamp: new Date().getTime()}));messageInput.value = '';}// 发送系统消息function sendSystemMessage(message) {showMessage(message, 'server-message');}// 事件监听messageForm.addEventListener('submit', function(e) {e.preventDefault();sendUserMessage();});// 回车发送消息messageInput.addEventListener('keypress', function(e) {if (e.key === 'Enter' && !e.shiftKey) {e.preventDefault();sendUserMessage();}});// 初始化connect();// 窗口关闭前发送离开消息window.addEventListener('beforeunload', function() {if (stompClient.connected) {sendSystemMessage(`${username} 离开了聊天室`);}});
</script>
</body>
</html>

JavaScript核心代码

// 初始化连接
const socket = new SockJS('http://localhost:8080/ws');
const stompClient = Stomp.over(socket);// 连接成功回调
function onConnectSuccess(frame) {updateStatus('已连接', 'connected');sendBtn.disabled = false;// 订阅消息stompClient.subscribe('/topic/greetings', function(response) {const message = JSON.parse(response.body);// 检查是否是自己的消息if (message.username !== username) {showMessage(`${message.username}: ${message.content}`, 'server-message');}});
}// 发送消息
function sendUserMessage() {const content = messageInput.value.trim();if (!content) return;// 显示用户消息showMessage(content, 'user-message');// 发送到服务器stompClient.send("/app/hello",{},JSON.stringify({username: username,content: content,timestamp: new Date().getTime()}));
}

五、遇到的问题及解决方案

问题:消息重复显示

现象:自己发送的消息会显示两次

原因

  1. 前端发送后立即显示

  2. 服务器广播后又显示一次

解决方案

stompClient.subscribe('/topic/greetings', function(response) {const message = JSON.parse(response.body);// 只显示别人发的消息if (message.username !== username) {showMessage(`${message.username}: ${message.content}`, 'server-message');}
});

六、项目特点

  1. 简单易用:代码简洁,适合初学者理解WebSocket原理

  2. 实时通信:基于WebSocket实现真正的双向通信

  3. 自动重连:网络断开后会自动尝试重新连接

  4. 用户区分:每个用户有随机生成的唯一用户名

七、总结

这个简单的WebSocket聊天室Demo虽然功能不多,但涵盖了WebSocket的核心功能。通过这个项目,我学到了:

  1. WebSocket的基本工作原理

  2. STOMP协议的使用方法

  3. 前后端如何通过WebSocket进行实时通信

  4. 如何处理常见的消息回显问题

如果想扩展功能,可以考虑添加:

  • 用户列表显示

  • 私聊功能

  • 消息历史记录

  • 图片/文件传输


未来计划:

Ai 聊天室   --- 未来可期

http://www.dtcms.com/wzjs/19166.html

相关文章:

  • ps专门做兼职的网站一个新产品怎么推广
  • 把里面的dede和plugins这2个文件夹覆盖到你的网站根目录湖南网站营销seo多少费用
  • 有哪些网站有做网页用的小图片什么优化
  • 加速乐 wordpressseo搜索排名优化是什么意思
  • 做网站 站内搜索引擎数据分析师一般一个月多少钱
  • 台州关键词排名优化企业网站优化推广
  • 潮州建设局网站长沙做网站推广公司咨询
  • c2c电子商务网站定制开发营销策划公司 品牌策划公司
  • 做游戏装备网站可以吗惠州关键词排名优化
  • 购物网站开发简介如何制作网站
  • 天津旅游网站建设百度域名收录
  • 360企业自助建站手机百度ai入口
  • 深圳专业做网站设计公司网络管理系统
  • 网站建设报告书范文百度网站推广怎么做
  • 淘宝有做网站吗网站seo技术教程
  • 上海企业一网通办网站如何做优化排名
  • 重庆公安网站备案山东网站seo
  • 手机网站制作教程视频教程目前搜索引擎排名
  • 大连专业手机自适应网站建设维护怎么自己搭建网站
  • 济南网站建设网络公司刷关键词指数
  • 带购物车的网站模板百度服务中心人工客服电话
  • psd网站排行榜百度旧版本下载
  • 建筑设计软件公司seo项目
  • 成都网站建设与推广免费b站推广
  • 网站安全监测预警平台建设成效肇庆百度快照优化
  • 企业网站建设不足seo每日工作内容
  • 网站信息内容建设责任制落实情况手机自己怎么建电影网站
  • 遂川网站建设凌哥seo
  • 达州网站建设公司网站首页关键词如何优化
  • 有没有专做水果网站如何做品牌宣传与推广