服务大厅门户与宣传片的集成：基于统一消息的实现方案

2026-01-10 04:50

小明：最近我们项目组在做一个新的服务大厅门户，用户反馈说宣传片部分不够直观，想看看有没有办法优化。

小李：是啊，现在宣传片通常是单独嵌入页面，但用户可能更希望直接在服务大厅里看到，或者有提示信息引导他们观看。

小明：对，而且如果能结合统一消息系统，比如当用户访问某个功能模块时，自动弹出相关宣传片，那体验会更好。

小李：没错，统一消息系统可以作为中间层，用来管理不同模块之间的通知、提示和内容推送。我们可以考虑用WebSocket或EventSource来实现实时通信。

小明：听起来不错，那具体怎么实现呢？比如宣传片的播放控制和消息触发机制。

小李：首先，我们需要一个统一的消息中心，负责接收来自各个模块的消息，并根据规则决定是否展示宣传片或提示信息。

小明：那这个消息中心需要具备哪些功能呢？

融合门户

小李：它应该支持消息的订阅、发布、过滤和路由。比如，当用户进入“在线申报”页面时，消息中心可以触发一个“宣传片展示”事件，然后由前端组件来播放对应的视频。

小明：明白了。那前端部分怎么处理这些消息呢？

小李：前端可以通过监听消息事件，动态加载宣传片组件。例如，使用JavaScript的addEventListener方法，监听来自后端的消息，然后根据消息类型渲染不同的内容。

小明：那具体的代码结构是怎样的？能不能给个例子？

小李：当然可以。我们可以先定义一个消息对象，包含类型、内容和时间戳等字段。

小明：好的，那我写一个示例代码吧。


// 消息结构
const message = {
type: 'video_prompt',
content: '请观看《在线申报指南》宣传片',
videoUrl: '/videos/online_apply.mp4',
timestamp: new Date().toISOString()
};

小明：这样是不是就可以发送到前端了？

小李：是的，后端可以通过WebSocket将这个消息发送到前端。前端接收到后，可以动态创建一个宣传片播放器。

小明：那宣传片播放器怎么实现呢？

小李：可以用HTML5的video标签，或者使用第三方库如Video.js来增强兼容性和功能。

小明：那前端如何处理这个消息并展示宣传片呢？

小李：我们可以写一个函数，根据消息类型来决定是否显示宣传片。例如：


function handleNotification(message) {
if (message.type === 'video_prompt') {
showVideoPlayer(message.videoUrl);
}
}
function showVideoPlayer(url) {
const player = document.getElementById('video-player');
player.src = url;
player.play();
}

小明：这样看起来挺直观的。那统一消息系统是如何与后端集成的呢？

小李：后端可以使用Node.js或Spring Boot等框架，搭建一个WebSocket服务器，用于推送消息到前端。

小明：那后端代码大概是什么样子的？

小李：以Node.js为例，可以这样写：


const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
console.log('客户端连接成功');
ws.on('message', function incoming(message) {
console.log('收到消息:', message.toString());
});
// 模拟发送消息
setTimeout(() => {
const msg = JSON.stringify({
type: 'video_prompt',
content: '请观看《在线申报指南》宣传片',
videoUrl: '/videos/online_apply.mp4'
});
ws.send(msg);
}, 2000);
});

小明：这样就能实现实时推送了。那前端如何监听这些消息呢？

小李：前端可以使用WebSocket API来连接后端，并监听消息事件。

小明：那代码大概是这样的？

小李：是的，如下所示：


const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = function(event) {
const message = JSON.parse(event.data);
handleNotification(message);
};

小明：这样就完成了前后端的通信。那宣传片播放的时候，是否还需要其他功能？

小李：比如暂停、播放、全屏等，这些都可以通过Video.js等库来实现。此外，还可以加入用户行为记录，比如观看时长、点击次数等，用于后续分析。

服务大厅