需求如下图：
需求描述： 实时消息弹窗，多条消息仅弹一个弹窗，且为最新的一条
思路：
1.用websocket进行实时推流
2.对于前端，因为消息提醒不分页面，所以写在全局，放在layout中
3.将当前这条消息的相关信息储存在缓存里或者 global的model中（实时更新头部消息的条数）
实现：
websocket可以直接在网上查找现成以包装好的js
这里只实现 仅弹一个弹窗，且为实时最新的一条功能
代码如下：
createWebSocket(url);
if (userName !== '' && websocket) {
websocket.onmessage = (response) => {
if (response && response.data) {
const data = JSON.parse(response.data);
const currentMSgId = localStorage.getItem('currentMSgId');
if (data.message.number > 0 && data.message.rid != currentMSgId) {
const mId = parseInt(currentMSgId); // 从缓存拿出来的key是字符串，和数字类型不对
notification.close(mId);
localStorage.setItem('currentMSgId', data.message.rid);
dispatch({
type: 'global/saveState',
payload: {
messageInfo: data.message },
});
notification.warning({
description: data.message.remark,
placement: 'bottomRight',
duration: 60,
className: styles.notification,
key: data.message.rid,
btn: (
<div>
<a onClick={
() => history.push('/messages')}>{
`${
formatMessage({
id: 'common.you.have',
})}${
data.message.number}${
formatMessage({
id: 'common.message.read' })}`}</a>
<span className={
styles.buttonGroup}>
<a
type="primary"
size="small"
onClick={
() => updateNewsStatus('操作一', [data.message.rid])}
>
{
formatMessage({
id: 'message.readAlready' })}
</a>
<a
type="primary"
size="small"
onClick={
() => updateNewsStatus('操作二', [data.message.rid])}
>
{
formatMessage({
id: 'message.overlook' })}
</a>
<a
type="primary"
size="small"
onClick={
() => updateNewsStatus('操作三', [data.message.rid])}
>
{
formatMessage({
id: 'message.isFalsePositive' })}
</a>
</span>
</div>
),
});
}
}
};
}