CN114064264A - 基于实时通信的前端多线程渲染方法、装置及计算机介质 - Google Patents

基于实时通信的前端多线程渲染方法、装置及计算机介质 Download PDF

Info

Publication number
CN114064264A
CN114064264A CN202111084694.8A CN202111084694A CN114064264A CN 114064264 A CN114064264 A CN 114064264A CN 202111084694 A CN202111084694 A CN 202111084694A CN 114064264 A CN114064264 A CN 114064264A
Authority
CN
China
Prior art keywords
thread
real
client
websocket
server
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111084694.8A
Other languages
English (en)
Inventor
姚光腾
罗超
王康
刘芝涛
李照川
赵海兴
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chaozhou Zhuoshu Big Data Industry Development Co Ltd
Original Assignee
Chaozhou Zhuoshu Big Data Industry Development Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Chaozhou Zhuoshu Big Data Industry Development Co Ltd filed Critical Chaozhou Zhuoshu Big Data Industry Development Co Ltd
Priority to CN202111084694.8A priority Critical patent/CN114064264A/zh
Publication of CN114064264A publication Critical patent/CN114064264A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/50Allocation of resources, e.g. of the central processing unit [CPU]
    • G06F9/5061Partitioning or combining of resources
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/46Multiprogramming arrangements
    • G06F9/50Allocation of resources, e.g. of the central processing unit [CPU]
    • G06F9/5005Allocation of resources, e.g. of the central processing unit [CPU] to service a request
    • G06F9/5027Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resource being a machine, e.g. CPUs, Servers, Terminals
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F2209/00Indexing scheme relating to G06F9/00
    • G06F2209/50Indexing scheme relating to G06F9/50
    • G06F2209/5018Thread allocation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了基于实时通信的前端多线程渲染方法、装置及计算机介质,属于客户端服务端实时通信技术领域,要解决的技术问题为如何克服传统http协议的单点请求对于处理双向通信业务的局限性和javascript单线程语言环境问题。包括如下步骤:通过websocket技术创建客户端和服务端的双向数据通信;通过webWorker技术创建多线程,包括主线程和websoket分支线程;将websocket技术和webWorker技术结合,创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理;创建心跳机制,基于心跳机制关闭客户端和服务端的长连接。

Description

基于实时通信的前端多线程渲染方法、装置及计算机介质
技术领域
本发明涉及客户端服务端实时通信技术领域,具体地说是基于实时通信的前端多线程渲染方法、装置及计算机介质。
背景技术
在前端数据渲染领域,实时数据的快速渲染会保证数据获取的准确性和及时性,减少浏览器内存损耗,保证数据交互的安全性,实现快速交互,提升用户对于软件系统的体验。
现代浏览器通信技术主要依赖于HTTP协议,HTTP协议有一个缺点:通信是单方面的,只能由客户端发起,服务器不能主动向客户端推送消息,对于实时数据的处理只能通过轮询的方式,不断向服务端发起单点请求,服务器返回查询结果。不同于HTTP协议,websocket技术既可以做到服务端向客户端推送消息,也可以客户端主动向服务端发送消息,实现了双向数据的平等通信,适合车辆路况、天气系统、聊天室等对双向通信传输实时数据要求较高的业务场景。
现代浏览器应用开发主要使用javascript语言,javascript语言采用的是单线程模型,所有的任务只能在一个线程上处理完成,如果一个线程发生阻断,其他线程上的任务都会受到影响。随着计算机算力的增强,多核CPU的出现,单线程的语言环境无法发挥计算机的整体计算能力,另外,现代浏览器应用愈发复杂,单点通信和双向通信往往会同时存在一个应用内,如果用单线程的语言环境同时处理单点通信和双向通信,会造成前端数据渲染不及时,浏览器内存资源耗费较高,通信受阻,代码冗余等一系列问题。webWorker的出现可以将单线程的javascript语言环境创造出多线程环境,允许主线程创建worker线程,将一些任务分配给后者运行。在主线程运行的同时,Worker线程在后台运行,两者互不干扰。等到Worker线程完成计算任务,再把结果返回给主线程。所以一些对实时数据渲染要求较高的任务,被Worker线程负担了,主线程(通常负责UI交互)就会很流畅,不会被阻塞或拖慢。
基于上述分析如何克服传统http协议的单点请求对于处理双向通信业务的局限性和javascript单线程语言环境问题,是需要解决的技术问题。
发明内容
本发明的技术任务是针对以上不足,提供基于实时通信的前端多线程渲染方法、装置及计算机介质,来解决如何克服传统http协议的单点请求对于处理双向通信业务的局限性和javascript单线程语言环境问题的技术问题。
第一方面,本发明的基于实时通信的前端多线程渲染方法,包括如下步骤:
通过websocket技术创建客户端和服务端的双向数据通信;
通过webWorker技术创建多线程,包括主线程和websoket分支线程;
将websocket技术和webWorker技术结合,创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理;
创建心跳机制,基于心跳机制关闭客户端和服务端的长连接。
作为优选,通过websocket技术创建客户端和服务端的双向数据通信,包括:
客户端通过浏览器的WebSocketAPI基于全双/通信的协议实现与服务端WebSocket的双向通信,服务端WebSocket监听浏览器基于WebSocket协议的连接,响应浏览器事件请求,完成与浏览器协议交互;
浏览器接收服务端下发的信息,创建持久性的连接,并进行双向数据传输。
作为优选,通过webWorker技术将单线程javascript语言创建成多线程javascript多线程语言环境。
作为优选,通过webWorker技术将单线程javascript语言创建成多线程javascript多线程语言环境,包括:
基于webWorker、使用构造函数,创建一个worker分支线程,主线程和worker分支线程相互之间使用postMessage()方法发送信息,并且通过onmessage作为event handler接收信息。
作为优选,创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理,包括:
将http单向请求方式、websocket双向通信方式与webWorker创建的多线程方式相结合,将http收发数据的机制建立在webWorker创建的主线程上,将websocket收发数据的机制建立在worker分支线程上。
作为优选,与用户交互的请求采用http请求方式;
对于浏览器页面数据更新频繁的需求,在worker分支线程上利用websocket建立前后端数据通信的长连接,服务端实时下发数据。
作为优选,基于心跳机制关闭客户端和服务端的长连接,包括:
客户端主动发送请求关闭长连接;
服务端监听客户端发送的心跳,根据心跳机制关闭长连接,关闭worker线程,以释放内存。
第二方面,本发明的装置,包括:至少一个存储器和至少一个处理器;
所述至少一个存储器,用于存储机器可读程序;
所述至少一个处理器,用于调用所述机器可读程序,执行第一方面任一所述的方法。
第三方面,本发明的计算机可读介质,所述计算机可读介质上存储有计算机指令,所述计算机指令在被处理器执行时,使所述处理器执行第一方面任一所述的方法。
本发明的基于实时通信的前端多线程渲染方法、装置及计算机介质具有以下优点:
1、使用websocket由服务器主动向客户端推送信息,客户端也可以主动向服务器发送信息,实现了真正的双向平等对话。适合对双向通信传输实时数据要求较高的业务场景;
2、将websocket的实时通信业务逻辑,建立在使用webWorker技术创建的worker线程上,负责计算密集型或低延迟的任务,不耽误主线程业务逻辑,从而提升客户端主线程用户交互逻辑的响应速度,提升用户体验;
3、使用http和websocket两种客户端与服务端通信方式,分离不同请求方式的主/worker线程一一对应的方式,可以适应复杂的业务需求,拓展特殊业务场景;
4、数据分发机制将主/worker分支分离、http请求和websocket请求分离,可以提升传统业务的迁移升级的效率,降低升级过程中的迁移成本。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域的普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
下面结合附图对本发明进一步说明。
图1为实施例1基于实时通信的前端多线程渲染方法的工作流程框图。
具体实施方式
下面结合附图和具体实施例对本发明作进一步说明,以使本领域的技术人员可以更好地理解本发明并能予以实施,但所举实施例不作为对本发明的限定,在不冲突的情况下,本发明实施例以及实施例中的技术特征可以相互结合。
本发明实施例提供基于实时通信的前端多线程渲染方法、装置及计算机介质,用于解决如何克服传统http协议的单点请求对于处理双向通信业务的局限性和javascript单线程语言环境问题的技术问题。
实施例1:
本发明基于实时通信的前端多线程渲染方法,包括如下步骤:
S100、通过websocket技术创建客户端和服务端的双向数据通信;
S200、通过webWorker技术创建多线程,包括主线程和websoket分支线程;
S300、将websocket技术和webWorker技术结合,创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理;
S400、创建心跳机制,基于心跳机制关闭客户端和服务端的长连接。
通过websocket技术创建客户端和服务端的双向数据通信,包括:客户端通过浏览器的WebSocketAPI基于全双/通信的协议实现与服务端WebSocket的双向通信,服务端WebSocket监听浏览器基于WebSocket协议的连接,响应浏览器事件请求,完成与浏览器协议交互;浏览器接收服务端下发的信息,创建持久性的连接,并进行双向数据传输。
通过webWorker技术将单线程javascript语言创建成多线程javascript多线程语言环境。具体为:基于webWorker,使用构造函数,创建一个worker线程,主线程和worker线程相互之间使用postMessage()方法来发送信息,并且通过onmessage这个event handler来接收信息。
客户端与服务端进行数据传说时,针对于和用户交互的请求采用http请求方式,建立在javascript的主线程上;对于页面数据更新频繁的需求,需要在非主线程的worker线程上利用websocket建立前后端数据通信的长连接,服务端实时下发数据。
创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理,包括:将http单向请求方式、websocket双向通信方式与webWorker创建的多线程方式相结合,将http收发数据的机制建立在webWorker创建的主线程上,将websocket收发数据的机制建立在worker分支线程上。
创建客户端和服务端的心跳机制,监听数据分发系统的接口状态,客户端可主动发送请求关闭长连接;服务端也可以监听客户端发送的心跳,根据心跳机制关闭长连接,关闭worker线程,以释放内存。
本实施例可实现客户端和服务端的实时通信和多线程,用webWorker创建javascript多线程语言环境;针对于和用户交互的请求采用http请求方式,建立在javascript的主线程上,于页面数据更新频繁的需求,需要在非主线程的worker线程上利用websocket建立前后端数据通信的长连接,服务端实时下发数据;建立数据分发机制,分发机制的功能主要包括分离请求方式(http请求和websocket请求),分离线程(主线程和worker线程),使得http请求方式响应主线程,websocket请求方式响应worker线程,并且根据请求状态对业务逻辑进行预处理;创建客户端和服务端的心跳机制,客户端可主动发送请求关闭长连接;服务端也可以监听客户端发送的心跳,根据心跳机制关闭长连接,关闭worker线程,以释放内存。
实施例2:
本发明的装置,包括:至少一个存储器和至少一个处理器;至少一个存储器,用于存储机器可读程序;至少一个处理器,用于调用所述机器可读程序,执行实施例1公开的方法。
实施例3:
本发明的计算机介质,为计算机可读介质,计算机可读介质上存储有计算机指令,计算机指令在被处理器执行时,使处理器执行实施例1公开的方法。具体地,可以提供配有存储介质的系统或者装置,在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码,且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。
在这种情况下,从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能,因此程序代码和存储程序代码的存储介质构成了本发明的一部分。
用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地,可以由通信网络从服务器计算机上下载程序代码。
此外,应该清楚的是,不仅可以通过执行计算机所读出的程序代码,而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作,从而实现上述实施例中任意一项实施例的功能。
此外,可以理解的是,将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中,随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作,从而实现上述实施例中任一实施例的功能。
需要说明的是,上述各流程和各系统结构图中不是所有的步骤和模块都是必须的,可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的,可以根据需要进行调整。上述各实施例中描述的系统结构可以是物理结构,也可以是逻辑结构,即,有些模块可能由同一物理实体实现,或者,有些模块可能分由多个物理实体实现,或者,可以由多个独立设备中的某些部件共同实现。
上文通过附图和优选实施例对本发明进行了详细展示和说明,然而本发明不限于这些已揭示的实施例,基与上述多个实施例本领域技术人员可以知晓,可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例,这些实施例也在本发明的保护范围之内。

Claims (9)

1.基于实时通信的前端多线程渲染方法,其特征在于包括如下步骤:
通过websocket技术创建客户端和服务端的双向数据通信;
通过webWorker技术创建多线程,包括主线程和websoket分支线程;
将websocket技术和webWorker技术结合,创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理;
创建心跳机制,基于心跳机制关闭客户端和服务端的长连接。
2.根据权利要求1所述的基于实时通信的前端多线程渲染方法,其特征在于通过websocket技术创建客户端和服务端的双向数据通信,包括:
客户端通过浏览器的WebSocketAPI基于全双/通信的协议实现与服务端WebSocket的双向通信,服务端WebSocket监听浏览器基于WebSocket协议的连接,响应浏览器事件请求,完成与浏览器协议交互;
浏览器接收服务端下发的信息,创建持久性的连接,并进行双向数据传输。
3.根据权利要求1所述的基于实时通信的前端多线程渲染方法,其特征在于通过webWorker技术将单线程javascript语言创建成多线程javascript多线程语言环境。
4.根据权利要求3所述的基于实时通信的前端多线程渲染方法,其特征在于通过webWorker技术将单线程javascript语言创建成多线程javascript多线程语言环境,包括:
基于webWorker、使用构造函数,创建一个worker分支线程,主线程和worker分支线程相互之间使用postMessage()方法发送信息,并且通过onmessage作为event handler接收信息。
5.根据权利要求1所述的基于实时通信的前端多线程渲染方法,其特征在于创建数据分发机制,通过数据分发机制分离请求方式以及线程,并根据请求状态对业务逻辑进行预处理,包括:
将http单向请求方式、websocket双向通信方式与webWorker创建的多线程方式相结合,将http收发数据的机制建立在webWorker创建的主线程上,将websocket收发数据的机制建立在worker分支线程上。
6.根据权利要求5所述的基于实时通信的前端多线程渲染方法,其特征在于与用户交互的请求采用http请求方式;
对于浏览器页面数据更新频繁的需求,在worker分支线程上利用websocket建立前后端数据通信的长连接,服务端实时下发数据。
7.根据权利要求1-6任一项所述的基于实时通信的前端多线程渲染方法,其特征在于基于心跳机制关闭客户端和服务端的长连接,包括:
客户端主动发送请求关闭长连接;
服务端监听客户端发送的心跳,根据心跳机制关闭长连接,关闭worker线程,以释放内存。
8.装置,其特征在于,包括:至少一个存储器和至少一个处理器;
所述至少一个存储器,用于存储机器可读程序;
所述至少一个处理器,用于调用所述机器可读程序,执行权利要求1至7中任一所述的方法。
9.计算机介质,为计算机可读介质,其特征在于,所述计算机可读介质上存储有计算机指令,所述计算机指令在被处理器执行时,使所述处理器执行权利要求1至7任一所述的方法。
CN202111084694.8A 2021-09-16 2021-09-16 基于实时通信的前端多线程渲染方法、装置及计算机介质 Pending CN114064264A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111084694.8A CN114064264A (zh) 2021-09-16 2021-09-16 基于实时通信的前端多线程渲染方法、装置及计算机介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111084694.8A CN114064264A (zh) 2021-09-16 2021-09-16 基于实时通信的前端多线程渲染方法、装置及计算机介质

Publications (1)

Publication Number Publication Date
CN114064264A true CN114064264A (zh) 2022-02-18

Family

ID=80233687

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111084694.8A Pending CN114064264A (zh) 2021-09-16 2021-09-16 基于实时通信的前端多线程渲染方法、装置及计算机介质

Country Status (1)

Country Link
CN (1) CN114064264A (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106326016A (zh) * 2016-07-28 2017-01-11 武汉票据交易中心有限公司 一种多线程事件分发方法和系统
CN107483412A (zh) * 2017-07-25 2017-12-15 中国科学院声学研究所 一种HTML5 web worker迁移方法及系统
CN108173900A (zh) * 2017-11-20 2018-06-15 中国科学院声学研究所 一种透明迁移的方法及设备
CN108280027A (zh) * 2018-02-08 2018-07-13 金蝶软件(中国)有限公司 一种脚本的并发调试渲染方法及装置
CN111669447A (zh) * 2020-06-16 2020-09-15 中国建设银行股份有限公司 一种页面显示方法、装置、设备和介质
CN112565214A (zh) * 2020-11-26 2021-03-26 中国船舶工业系统工程研究院 基于WebSocket的数据传输方法、系统和介质
CN112637343A (zh) * 2020-12-23 2021-04-09 中国建设银行股份有限公司 文件传输方法、装置及系统

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106326016A (zh) * 2016-07-28 2017-01-11 武汉票据交易中心有限公司 一种多线程事件分发方法和系统
CN107483412A (zh) * 2017-07-25 2017-12-15 中国科学院声学研究所 一种HTML5 web worker迁移方法及系统
CN108173900A (zh) * 2017-11-20 2018-06-15 中国科学院声学研究所 一种透明迁移的方法及设备
CN108280027A (zh) * 2018-02-08 2018-07-13 金蝶软件(中国)有限公司 一种脚本的并发调试渲染方法及装置
CN111669447A (zh) * 2020-06-16 2020-09-15 中国建设银行股份有限公司 一种页面显示方法、装置、设备和介质
CN112565214A (zh) * 2020-11-26 2021-03-26 中国船舶工业系统工程研究院 基于WebSocket的数据传输方法、系统和介质
CN112637343A (zh) * 2020-12-23 2021-04-09 中国建设银行股份有限公司 文件传输方法、装置及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
YHB: ""WebWorker与WebSocket实现前端消息总线"", pages 1 - 8, Retrieved from the Internet <URL:《https://segmentfault.com/a/1190000015960510》> *

Similar Documents

Publication Publication Date Title
Indrasiri et al. Microservices for the Enterprise
US10733019B2 (en) Apparatus and method for data processing
US20230393915A1 (en) Publish-subscribe framework for application execution
US8806506B2 (en) System and method for processing messages using a common interface platform supporting multiple pluggable data formats in a service-oriented pipeline architecture
US9674293B2 (en) Systems and methods for remote access to IMS databases
US8316080B2 (en) Internationalization of a message service infrastructure
CN110806923A (zh) 一种区块链任务的并行处理方法、装置、电子设备和介质
KR101496333B1 (ko) 소프트웨어 버스를 이용한 컴포넌트 연결 시스템 및 방법
US10592296B2 (en) Maintaining state information in a multi-component, event-driven state machine
CN110058926B (zh) 用于处理gpu任务的方法、设备和计算机可读介质
CN111796983A (zh) 一种体彩异常交易请求的监控系统及方法
CN109542642A (zh) 一种前端任务处理的方法及装置
CN112000738B (zh) 数据库连接的切换方法、装置、设备及介质
US20120110581A1 (en) Task cancellation grace periods
CN110851276A (zh) 一种业务请求处理方法、装置、服务器和存储介质
CN115878301A (zh) 一种数据库网络负载性能的加速框架、加速方法及设备
CN114064264A (zh) 基于实时通信的前端多线程渲染方法、装置及计算机介质
US11163601B2 (en) Dynamically determine the transaction coordinator in multitier hybrid transaction processing middleware systems
CN113051055A (zh) 一种任务处理方法和装置
EP4086753A1 (en) Decision scheduling customization method and device based on information flow
KR20150039998A (ko) 비즈니스 프로세스 관리 방법, 이를 수행하는 비즈니스 프로세스 관리 서버 및 이를 저장하는 기록매체
US20230093004A1 (en) System and method for asynchronous backend processing of expensive command line interface commands
Coviello et al. Dataxe: A system for application self-optimization in serverless edge computing environments
CN104834724B (zh) 一种数据库同步方法和装置
US8990185B2 (en) Evaluating reference based operations in shared nothing parallelism systems

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20220218

RJ01 Rejection of invention patent application after publication