js仿消息推送

最新推荐文章于 2023-02-03 09:05:29 发布

前端王小婷

最新推荐文章于 2023-02-03 09:05:29 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/weixin_44763569/article/details/89926467

版权

在项目中利用WebSocket实现消息推送功能，展示最新十条消息，并实时更新，新消息出现在顶部，旧消息依次下移。通过JS仿写了一个通知栏新消息实时更新的效果。

摘要由CSDN通过智能技术生成

在最近的项目里面，用到websocket做消息推送，其中有这样的一个效果，在消息列表的模块，接收到很多条信息，展示在界面的是最近的十条接受到的消息，实时更新模块，每次接受一条消息，都会展示在最顶部，旧的消息排列在地下，大致效果如下所示。

用js仿写了一个简单的，关于通知栏新消息实时推送更新效果，代码如下：

<!DOCTYPE html >
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>nginx测试</title>

        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

    </head>
    <style>
        .expa {
            width: 300px;
            height: 350px;
            border: 1px solid #F2F2F2;
            overflow: auto;
            margin-left: 200px;
        }
        
        td {
            width

最低0.47元/天解锁文章

前端王小婷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js仿消息推送

在最近的项目里面，用到websocket做消息推送，其中有这样的一个效果，在消息列表的模块，接收到很多条信息，展示在界面的是最近的十条接受到的消息，实时更新模块，每次接受一条消息，都会展示在最顶部，旧的消息排列在地下，大致效果如下所示。用js仿写了一个简单的，关于通知栏新消息实时推送更新效果，代码如下：<!DOCTYPE html ><html> ...
复制链接

扫一扫