WebSocket 进度条实现

最新推荐文章于 2024-08-27 18:30:49 发布
最新推荐文章于 2024-08-27 18:30:49 发布
阅读量442 收藏 1
点赞数
文章标签： websocket javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43183527/article/details/100076181
版权

websocket

连接推送方式，如果 连接时刷新前端界面会如何

系统新增资料 批量上传 功能，用户再上传过程中，不知道上传进度，等待时间过长会误以为系统导入异常 而关闭页面，重新导入，可能出现资料重复的问题。为此，需要提供类似文件上传进度 将执行进度回复给前端页面的方案。

消息从服务端客户端主动推送到客户端，最直接的方案是使用WebSocke(可以双向通信就行)。感觉是有点大材小用了。

具体实现

a，页面加载时与WebSocket服务端建立连接

b，服务端接收连接请求并记录下客户端socket连接

c，执行导入

d，服务端将进度返回前端(当前记录行/总记录行数)

e，前端解析

<script src="~/Scripts/jquery-1.6.4.js"></script>
<script type="text/javascript">
    var ws;
    $(
        function () {
            debugger;
            ws = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/plmimport/Home/WSChat?userid=" + $('#userid').val());
            ws.onopen = function () {
                //$("#messageSpan").text("Connected!");
                console.log("Connected!");
            };
            ws.onmessage = function (result) {
                //$("#messageSpan").text(result.data);
                $("#process").val(result.data.split('/')[0]);
                $("#process")[0].setAttribute("max", result.data.split('/')[1]);
                $("#processText").text(result.data);
                console.log(result.data);
            };
            ws.onerror = function (error) {
                //$("#messageSpan").text(error.data);
                console.log(error.data);
            };
            ws.onclose = function () {
                //$("#messageSpan").text("Disconnected!");
                console.log("Disconnected!");
            };
            
            $("#btnImport").click(function () {
                $(this).slideUp("slow");
                $("#process").show("slow");//.toggle("hidden");
                $("#p1").text("正在执行，请勿关闭当前页面！");
                $.ajax({
                    url: '/plmimport/home/index',
                    type: 'POST',
                    cache: false,
                    data: new FormData($('#uploadForm')[0]),
                    processData: false,
                    contentType: false
                }).done(function (res) {
                    $("#p1").text(res);
                    $("#btnImport").show("slow");
                }).fail(function (res) {
                    $("#p1").text(res);
                });
            });
        }
    );
</script>

<body>
    <div style="display:none;border: 1px solid #C8DBD3; padding: 8px; line-height: 30px; height:55px; background:url(../../Images/bg_odv.png);">
    </div>
    <input type="text" id="userid" value="@ViewBag.UserId" hidden />
    @*@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))
    {*@
        <form id="uploadForm" enctype="multipart/form-data">
            <h2>料件导入(Excel)</h2>
            <span style="color:red">@ViewBag.PartTemplateInfo</span>
            <div>
                <fieldset id="myfieldset">
                    <legend>帮助 </legend>
                    <p style="color: Red; text-align: left;">
                        @Html.ActionLink("模版下载", "GetFile", new { down = "template" })
                    </p>
                </fieldset>
            </div>
            <div style="margin-top: 20px;">
                <fieldset id="myfieldset2">
                    <legend>导入信息提示区</legend>
                    @*<p id="" style="color: Red; text-align:left;">@ViewBag.error</p>*@
                    <div>
                        <progress id="process" value="1" max="100" hidden></progress>
                        <label id="processText"></label>
                    </div>
                    <p id="p1" style="color: Red; text-align:left;">@ViewBag.error</p>
                </fieldset>
            </div>
            <div style="margin-top: 20px;">
                <fieldset id="myfieldset1">
                    <legend>导入操作</legend>
                    <p>选择文件：<input id="FileUpload" type="file" name="files" style="width: 250px; height: 28px;background: White" class="easyui-validatebox" /></p>
                    <p>
                        <input id="btnImport" type="button" value="执行导入" style="width: 100px; height: 28px;" />
                    </p>
                </fieldset>
            </div>
        </form>
            @* } *@
    </body>

#region 使用WebSocket实现消息推送
private static Dictionary<string, System.Net.WebSockets.WebSocket> CONN_POOL = new Dictionary<string, System.Net.WebSockets.WebSocket>();
public void WSChat()
{
    if (HttpContext.IsWebSocketRequest)
    {
        HttpContext.AcceptWebSocketRequest(ProcessWSChat);
    }
}
async System.Threading.Tasks.Task ProcessWSChat(System.Web.WebSockets.AspNetWebSocketContext context)
        {
            string user = context.QueryString["userid"]?.ToString();
            if (string.IsNullOrEmpty(user))
            {
                return;
            }
            System.Net.WebSockets.WebSocket ws = context.WebSocket;

            if (CONN_POOL.Keys.Contains(user))
            {
                if (CONN_POOL[user] != ws)
                {
                    CONN_POOL[user] = ws;
                }
            }
            else
            {
                CONN_POOL.Add(user, ws);
            }
            while (true)
            {
                if (ws.State == System.Net.WebSockets.WebSocketState.Open)
                {
                    ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                    System.Net.WebSockets.WebSocketReceiveResult result = await ws.ReceiveAsync(buffer, System.Threading.CancellationToken.None);
                    try
                    {
                        #region 连接关闭，删除连接池
                        if (ws.State != System.Net.WebSockets.WebSocketState.Open)
                        {
                            if (CONN_POOL.Keys.Contains(user))
                            {
                                CONN_POOL.Remove(user);
                            }
                            break;
                        }
                        #endregion
                    }
                    catch (Exception ex)
                    {
                        if (CONN_POOL.Keys.Contains(user))
                        {
                            CONN_POOL.Remove(user);
                        }
                    }
                }
                else
                {
                    //发送消息时已离线。退出
                    break;
                }

            }
        }

async private void SendMessageToClient(string message)
        {
            ///消息推送异常不抛错误。
            try
            {
                if (Session["plmUserid"] == null || !CONN_POOL.Keys.Contains(Session["plmUserid"].ToString()))
                {
                    return;
                }
                if (CONN_POOL.Keys.Contains(Session["plmUserid"].ToString()))
                {
                    if (CONN_POOL[Session["plmUserid"].ToString()].State == System.Net.WebSockets.WebSocketState.Open)
                    {
                        await CONN_POOL[Session["plmUserid"].ToString()].SendAsync(GetArrSegFromStr(message), System.Net.WebSockets.WebSocketMessageType.Text, true, System.Threading.CancellationToken.None);
                    }
                }
            }
            catch (Exception ex)
            {
            }
        }

/// <summary>
/// 字符串转ArraySegment<byte>，用于WebSocket发送消息
/// </summary>
/// <param name="text">要转换的文本</param>
/// <returns></returns>
ArraySegment<byte> GetArrSegFromStr(string text)
        {
            return new ArraySegment<byte>(System.Text.Encoding.UTF8.GetBytes(text));
        }
/// <summary>
/// ArraySegment<byte>转字符串，用于消息队列存储
/// </summary>
/// <param name="text">要转换的ArraySegment对象</param>
/// <returns></returns>
string GetStrFromArrSeg(ArraySegment<byte> arrSeg)
        {
            return System.Text.Encoding.UTF8.GetString(arrSeg.Array);
        }
#endregion
//导入执行
[HttpPost]
public async System.Threading.Tasks.Task<string> Index(HttpPostedFileBase filebase)
{

    //ViewBag.error = "【inn=null】创建对象失败，请联系资讯PLM Team";
    //return ViewBag.error;
   SendMessageToClient("10/50");
   System.Threading.Thread.Sleep(1000);
   endMessageToClient("20/50");
   System.Threading.Thread.Sleep(1000);
   SendMessageToClient("30/50");
   System.Threading.Thread.Sleep(1000);
   System.Threading.Thread.Sleep(1000);
   SendMessageToClient("40/50");
   System.Threading.Thread.Sleep(1000);
   SendMessageToClient("50/50");
   System.Threading.Thread.Sleep(1000);
   return null;
}

遇到的问题：

在使用Form 对button是submit类型，提交到Action时，页面点击 [执行导入]时，Firefox存在一个问题：载入页面时与 ws: 的连接中断。官方也一直没有解决此问题。Chrome就可以正常执行。

解决办法就是使用Ajax，如此页面URL就不会是等待加载 的状态了，数据也能提交执行，然后通过WebSocket将进度传回前端。

clone repository

下载某个仓库的代码在GitHub上

create new repository

新建一个仓库

①填写信息：名称自取，描述自述，本地路径自取，可以选择初始化一份readme，git-ignore可以忽略掉一些没用的编译文件。

②新建一个txt文件，显示一个change

③对本次更改进行描述，然后commit to master

④同步，只要publish repository即可

⑤回滚：history中右击revert即可。

午夜.幽魂.男
关注
专栏目录
WebSocket实现下载进度条示例
dushuaifeng的博客
05-24 500
用websocket实现下载进度条
springboot+websocket实现任务进度条
StudingStudent的博客
04-20 3646
springboot+websocket实现任务进度条
java基于socket的文件发送与接收，有界面，有进度条
06-24
java基于socket的文件发送与接收，有界面，有进度条，没有bug，很好理解的
通过websock实现实时刷新前端(可实现进度条)
最新发布
AsFarmer的博客
08-27 503
websocket(长链接)应用
websocket实现进度条
程序员日志
07-22 578
简易websocket实现进度条的小练习。
websocket实现web上传文件进度条
lizhi1030的博客
09-06 1817
websocket实现web上传文件进度条
WebSocket整合springboot显示进度条
weixin_40659514的博客
12-19 2759
springboot和websocket
springboot+websocket进度条实战
11-11
在本项目中，"springboot+websocket进度条实战"是一个基于Spring Boot框架和WebSocket技术的实战应用，旨在展示如何在Web应用程序中实现一个实时的进度条功能。Spring Boot简化了Java Web开发，提供了快速构建独立...
关于SpringBoot整合WebSocket实现前端进度条遇到的问题
zhou_xiaozhou的博客
04-06 896
一、客户端连接服务器失败 （viewCode: 200） 背景 我在做的项目中存在token校验的过程，关于这个过程我当时还不清楚，花了一个晚上去网上搜索了解。简单来讲，对于我们工程来讲，就是客户端初次开启会话与服务端建立连接的时候，后端会根据用户信息、算法.....等系列操作生成一个唯一的token,下次客户端进行请求时会在HttpHeader携带这个token。这样做的目的是校验前后访问服务器的是不是同一个人。 这里附上大佬通俗易懂的解说：彻底理解cookie，session，...
Netty 文件上传获取进度条
01-10
总的来说，Netty结合WebSocket和NIO，提供了一种高效且用户体验友好的文件上传进度条实现方式。它利用WebSocket的双向通信和NIO的非阻塞特性，避免了不必要的资源浪费，提升了文件上传的效率。通过这个案例，我们...
实时web进度条
08-28
在处理长任务，大数据交互是，程序容易造成假死，用户也不知道程序在做什么，于是就需要一个进度条，但是网上进度条实例，效果都不佳，都不能实时更新进度条，比如伪进度条就只能是一张图片，还有的是事务处理完后，记录监控的时间，再完成进度条显示，这肯定是不可以的。还有一种是比较实用，但是把事务处理随着进度条一起处理，也就是进度条是从1%到100%，那么事务就处理一百次。于是结合网上实例，我写了下面的这个多线程进度条。 我写的这个进度条的特点是： 可以根据事务处理的时间，实时更新进度条，简单的说是：比如一个长任务，大数据交互大概要话4分钟的话，那么我们就可以把进度条从1%到100%，每跟进一步，就是40微秒，当然这是多线程的。一个线程处理进度条，主线程处理长任务，大数据交互部分，也就是说如果一个长任务，大数据交互大于4分钟，那么进度条先执行完，但是进度条线程会让自己全部执行完，才把cup交给主线程。如果正常情况一个长任务，大数据交互小于或等于，那么正好是我们要的效果。
Springboot集成WebSocket实现前端进度条实时显示
zhou_xiaozhou的博客
04-01 4658
前言：本大大找了两天，看了无数篇帖子，大多都是东扯扯，西扯扯，完全看不懂；最后万户从中一点绿，总算找到能运作的写法。因为找不到原文，在这里先感谢那位大佬！！！ 一、配置 package com.linkstec.tad.rakuraku.common.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; imp..
前端封装WebSocket通信的进实时进度条
Anly_Zz的博客
07-04 232
app.vue中的代码（这里是我项目里方法，可根据自己项目进行更改。此处作用是保证刷新或者切换项目其他页面，也能保证接收到新的消息推送）存入vueX中的触发方法（这里是我项目里方法，可根据自己项目进行更改）vue.config.js里的修改。其他页面使用本组件时。
用websocket做进度条（前端）
weixin_44152684的博客
02-20 587
用websocket做进度条（前端）
Web实时进度条
拂晓的风
06-03 1851
网上已经有很多Web进度条的例子，但是很多都是估算时间，不能正真反应任务的真实进度。我自己结合多线程和ShowModalDialog制做了一个实时进度条，原理很简单：使用线程开始长时间的任务，定义一个Session，当任务进行到不同的阶段改变Session的值，线程开始的同时使用ShowModalDialog打开一个进度条窗口，不断刷新这个窗口获取Session值，反应出实时的进度。下面就来看
springboot+websocket+vue实现信息推送，实现下载进度条
weixin_38698418的博客
08-31 1307
springboot+websocket+vue实现信息推送，实现下载进度条
后台上传：Java+Vue+Websocket实现OSS文件上传进度条功能完整教程
Da_zhenzai的博客
10-13 4590
通过以上步骤，我们实现了一个包含上传文件和实时显示上传进度的文件上传功能。前端使用Vue编写了上传组件，后端使用Java和Spring Boot进行文件上传处理。通过调用阿里云OSS服务和监听上传文件字节来计算进度，我们能够实时显示文件上传的进度条，提升用户体验。结束语：人生最大的浪费不是金钱的浪费，而是时间的浪费、认知的迟到。
vue前端利用websocket添加真实进度条
iseyre的博客
08-15 757
可在mounted中调用this.initWebSocket()最后在调用保存接口时传递与后端定义好的参数即可。进度条样式(这里用的是element里的)progressVal默认0。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值