当前位置：网站首页 > 技术文章 > 正文

SSE前端（sse前端跨域）

zhezhongyun 2025-06-15 20:35 14 浏览

<!DOCTYPE html>

<head>

<title>SSE 实时数据客户端</title>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#165DFF',

success: '#00B42A',

warning: '#FF7D00',

danger: '#F53F3F',

dark: '#1D2129',

light: '#F2F3F5'

fontFamily: {

inter: ['Inter', 'system-ui', 'sans-serif'],

}

</script>

@layer utilities {

.content-auto {

content-visibility: auto;

}

.scrollbar-hide {

-ms-overflow-style: none;

scrollbar-width: none;

}

.scrollbar-hide::-webkit-scrollbar {

display: none;

}

.card-shadow {

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}

</style>

</head>

<h1 class="text-xl font-bold text-dark">SSE 实时数据客户端</h1>

</div>

</div>

<i class="fa fa-plug mr-1"></i> 连接

</button>

<i class="fa fa-power-off mr-1"></i> 断开

</button>

</div>

</header>

<i class="fa fa-sliders text-primary mr-2"></i> 配置

</h2>

<div>

<input type="text" id="sse-url" name="sse-url"

class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"

value="http://localhost:8080/sse" placeholder="输入 SSE 服务器地址">

</div>

<div>

<select id="event-types" name="event-types" multiple

class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors">

<option value="message" selected>message (默认消息)</option>

<option value="notification" selected>notification (通知)</option>

<option value="update" selected>update (更新)</option>

<option value="error">error (错误)</option>

</select>

<p class="text-xs text-gray-500 mt-1">按住 Ctrl/Command 选择多个事件类型</p>

</div>

<div>

</label>

<span class="ml-2 text-sm text-gray-700">显示时间戳</span>

</label>

</div>

<div>

<label for="max-messages" class="block text-sm font-medium text-gray-700 mb-1">最大消息数</label>

<input type="number" id="max-messages" name="max-messages" min="10" max="1000" value="100"

class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors">

<p class="text-xs text-gray-500 mt-1">超过此数量时自动清除最早的消息</p>

</div>

<i class="fa fa-trash mr-1"></i> 清除消息

</button>

</div>

<i class="fa fa-comments text-primary mr-2"></i> 实时消息

</h2>

<span id="message-count">0</span> 条消息

</div>

<input type="text" id="message-filter" name="message-filter"

class="flex-grow px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"

placeholder="过滤消息内容...">

<i class="fa fa-filter mr-1"></i> 应用

</button>

<i class="fa fa-refresh mr-1"></i> 重置

</button>

</div>

<p>连接后将显示实时消息</p>

</div>

</div>

<p id="error-message">发生未知错误，请检查连接</p>

</div>

</main>

</div>

</footer>

document.addEventListener('DOMContentLoaded', function() {

// 元素引用

const connectBtn = document.getElementById('connect-btn');

const disconnectBtn = document.getElementById('disconnect-btn');

const statusIndicator = document.getElementById('status-indicator');

const statusText = document.getElementById('status-text');

const sseUrlInput = document.getElementById('sse-url');

const messagesContainer = document.getElementById('messages-container');

const messagesElement = document.getElementById('messages');

const messageCountElement = document.getElementById('message-count');

const clearMessagesBtn = document.getElementById('clear-messages');

const autoScrollCheckbox = document.getElementById('auto-scroll');

const timestampCheckbox = document.getElementById('timestamp');

const maxMessagesInput = document.getElementById('max-messages');

const messageFilterInput = document.getElementById('message-filter');

const applyFilterBtn = document.getElementById('apply-filter');

const resetFilterBtn = document.getElementById('reset-filter');

const errorContainer = document.getElementById('error-container');

const errorMessageElement = document.getElementById('error-message');

const eventTypesSelect = document.getElementById('event-types');

// 全局变量

let eventSource = null;

let messageCount = 0;

let filteredCount = 0;

let currentFilter = '';

let isConnected = false;

// 更新连接状态UI

function updateConnectionStatus(connected) {

isConnected = connected;

if (connected) {

connectBtn.disabled = true;

connectBtn.classList.add('opacity-70', 'cursor-not-allowed');

disconnectBtn.disabled = false;

disconnectBtn.classList.remove('opacity-70', 'cursor-not-allowed');

statusIndicator.classList.remove('bg-gray-400', 'bg-danger');

statusIndicator.classList.add('bg-success');

statusText.textContent = '已连接';

statusText.classList.remove('text-gray-600', 'text-danger');

statusText.classList.add('text-success');

errorContainer.classList.add('hidden');

} else {

connectBtn.disabled = false;

connectBtn.classList.remove('opacity-70', 'cursor-not-allowed');

disconnectBtn.disabled = true;

disconnectBtn.classList.add('opacity-70', 'cursor-not-allowed');

statusIndicator.classList.remove('bg-success', 'bg-danger');

statusIndicator.classList.add('bg-gray-400');

statusText.textContent = '未连接';

statusText.classList.remove('text-success', 'text-danger');

statusText.classList.add('text-gray-600');

}

// 显示错误消息

function showError(message) {

errorMessageElement.textContent = message;

errorContainer.classList.remove('hidden');

statusIndicator.classList.remove('bg-success', 'bg-gray-400');

statusIndicator.classList.add('bg-danger');

statusText.textContent = '连接错误';

statusText.classList.remove('text-success', 'text-gray-600');

statusText.classList.add('text-danger');

}

// 格式化时间戳

function formatTimestamp() {

const now = new Date();

return now.toLocaleTimeString('zh-CN', {

hour: '2-digit',

minute: '2-digit',

second: '2-digit',

hour12: false

});

}

// 添加消息到容器

function addMessage(type, data, timestamp) {

// 检查是否超过最大消息数

if (messageCount >= parseInt(maxMessagesInput.value)) {

const firstMessage = messagesElement.querySelector('.message-item');

if (firstMessage) {

messagesElement.removeChild(firstMessage);

messageCount--;

if (!currentFilter) {

filteredCount--;

}

// 创建消息元素

const messageElement = document.createElement('div');

messageElement.className = 'message-item p-3 rounded-lg card-shadow transition-all duration-300';

// 根据事件类型设置样式

let bgColor, textColor, iconClass;

switch (type) {

case 'notification':

bgColor = 'bg-blue-50';

textColor = 'text-blue-800';

iconClass = 'fa-bell';

break;

case 'update':

bgColor = 'bg-green-50';

textColor = 'text-green-800';

iconClass = 'fa-refresh';

break;

case 'error':

bgColor = 'bg-red-50';

textColor = 'text-red-800';

iconClass = 'fa-exclamation-triangle';

break;

default: // message

bgColor = 'bg-gray-50';

textColor = 'text-gray-800';

iconClass = 'fa-comment';

}

messageElement.classList.add(bgColor, textColor);

// 消息内容

let content = '';

try {

// 尝试解析JSON

const jsonData = JSON.parse(data);

content = JSON.stringify(jsonData, null, 2);

messageElement.classList.add('font-mono', 'text-sm');

} catch (e) {

// 普通文本

content = data;

}

// 构建消息HTML

messageElement.innerHTML = `

</div>

${timestampCheckbox.checked ? `<span class="text-xs opacity-70">${timestamp}</span>` : ''}

</div>

<div class="mt-1 text-sm whitespace-pre-wrap break-words">${content}</div>

</div>

// 添加到容器

messagesElement.appendChild(messageElement);

messageCount++;

// 如果没有过滤器，增加过滤计数

if (!currentFilter) {

filteredCount++;

}

// 更新计数显示

updateMessageCount();

// 如果启用自动滚动，滚动到底部

if (autoScrollCheckbox.checked) {

messagesContainer.scrollTop = messagesContainer.scrollHeight;

}

// 添加动画效果

setTimeout(() => {

messageElement.classList.add('opacity-100');

}, 10);

}

// 更新消息计数

function updateMessageCount() {

messageCountElement.textContent = currentFilter ?

`${filteredCount} / ${messageCount}` :

messageCount;

}

// 过滤消息

function filterMessages() {

const filter = messageFilterInput.value.trim().toLowerCase();

currentFilter = filter;

filteredCount = 0;

const messageItems = messagesElement.querySelectorAll('.message-item');

messageItems.forEach(item => {

const content = item.textContent.toLowerCase();

if (filter === '' || content.includes(filter)) {

item.classList.remove('hidden');

filteredCount++;

} else {

item.classList.add('hidden');

}

});

updateMessageCount();

}

// 连接到SSE服务器

function connectToSse() {

const url = sseUrlInput.value.trim();

if (!url) {

showError('请输入有效的SSE服务器URL');

return;

}

try {

// 关闭现有连接

if (eventSource) {

eventSource.close();

}

// 创建新的EventSource

eventSource = new EventSource(url);

updateConnectionStatus(true);

// 监听默认消息事件

eventSource.onmessage = function(event) {

const selectedTypes = Array.from(eventTypesSelect.selectedOptions).map(option => option.value);

if (selectedTypes.includes('message')) {

addMessage('message', event.data, formatTimestamp());

}

};

// 监听自定义事件

Array.from(eventTypesSelect.options).forEach(option => {

const eventType = option.value;

if (eventType !== 'message') {

eventSource.addEventListener(eventType, function(event) {

const selectedTypes = Array.from(eventTypesSelect.selectedOptions).map(option => option.value);

if (selectedTypes.includes(eventType)) {

addMessage(eventType, event.data, formatTimestamp());

}

});

}

});

// 监听连接开启

eventSource.onopen = function() {

console.log('SSE 连接已建立');

addMessage('system', '已成功连接到服务器', formatTimestamp());

};

// 监听错误

eventSource.onerror = function(error) {

console.error('SSE 错误:', error);

if (eventSource.readyState === EventSource.CLOSED) {

showError('连接已关闭，可能是服务器问题或网络连接中断');

updateConnectionStatus(false);

} else {

showError('发生连接错误，请检查服务器URL和网络连接');

}

};

} catch (error) {

console.error('创建 EventSource 失败:', error);

showError(`创建连接失败: ${error.message}`);

updateConnectionStatus(false);

}

// 断开SSE连接

function disconnectFromSse() {

if (eventSource) {

eventSource.close();

eventSource = null;

updateConnectionStatus(false);

addMessage('system', '已断开与服务器的连接', formatTimestamp());

}

// 清除所有消息

function clearAllMessages() {

messagesElement.innerHTML = '';

messageCount = 0;

filteredCount = 0;

updateMessageCount();

}

// 事件监听

connectBtn.addEventListener('click', connectToSse);

disconnectBtn.addEventListener('click', disconnectFromSse);

clearMessagesBtn.addEventListener('click', clearAllMessages);

applyFilterBtn.addEventListener('click', filterMessages);

resetFilterBtn.addEventListener('click', function() {

messageFilterInput.value = '';

currentFilter = '';

filterMessages();

});

// 输入框回车键触发过滤

messageFilterInput.addEventListener('keyup', function(event) {

if (event.key === 'Enter') {

filterMessages();

}

});

// 自动滚动切换

autoScrollCheckbox.addEventListener('change', function() {

if (this.checked) {

messagesContainer.scrollTop = messagesContainer.scrollHeight;

}

});

// 最大消息数变更

maxMessagesInput.addEventListener('change', function() {

// 确保值在合理范围内

const value = parseInt(this.value);

if (value < 10) {

this.value = 10;

} else if (value > 1000) {

this.value = 1000;

}

// 如果当前消息数超过新的最大值，清理消息

while (messageCount > parseInt(this.value)) {

const firstMessage = messagesElement.querySelector('.message-item');

if (firstMessage) {

messagesElement.removeChild(firstMessage);

messageCount--;

if (!currentFilter) {

filteredCount--;

}

updateMessageCount();

});

// 事件类型变更

eventTypesSelect.addEventListener('change', function() {

// 如果没有选中任何事件类型，默认选择message

if (this.selectedOptions.length === 0) {

const messageOption = Array.from(this.options).find(option => option.value === 'message');

if (messageOption) {

messageOption.selected = true;

}

});

// 初始设置

updateConnectionStatus(false);

});

</script>

</body>

</html>

flex-shrink 属性

上一篇：HarmonyOS实战:腾讯IM之聊天详情页面搭建(二)
下一篇：移动端重构实战系列:0-4 章（移动端技术架构有哪些）

SSE前端（sse前端跨域）

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?