前端websocket和后端传输数据

前言：用户在页面添加内容以后，通过接口将数据存储在大数据工程师哪儿，大数据哪儿把文件处理以后传输给后端java工程师，java工程师将添加的该条信息需要及时传递给用户，让用户进行下载。websocket在整个流程中负责前后端数据的传递，及后端将数据传输给前端，前端进行展示，提示用户随时下载所需要下载的内容。

图一、用户在此添加数据然后点击发布，数据存储进后端大数据

数据存进系统大数据进行处理过后，后端和前端通过websocket实时传输

前端需要做的创建websocket，其中可以给后端发送数据，也可以接收后端返回的数据

<template><div class="test"></div>
</template><script>export default {name : 'WebSocket',data() {return {websock: null,}},created() {this.initWebSocket();},destroyed() {this.websock.close() //离开路由之后断开websocket连接},methods: {initWebSocket(){ //初始化weosocket// const userId = window.sessionStorage.getItem('userId')const wsuri = "ws://127.0.0.1:8080/webSocket/" + userId;  //此处访问后端服务this.websock = new WebSocket(wsuri);this.websock.onmessage = this.websocketonmessage;// this.websock.onopen = this.websocketonopen;this.websock.onerror = this.websocketonerror;this.websock.onclose = this.websocketclose;},websocketonopen(){ //连接建立之后执行send方法发送数据let actions = {"test":"李狗蛋"};this.websocketsend(JSON.stringify(actions));},websocketonerror(){ //连接建立失败重连this.initWebSocket();},websocketonmessage(e){ //数据接收const redata = e.dataconsole.log(redata)},websocketsend(Data){//数据发送this.websock.send(Data);},websocketclose(e){  //关闭console.log('断开连接',e);},},}
</script><style lang='less'></style>

前端websocket和后端传输数据相关推荐

java使用websocket前后端通信实现
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. WebSocket是客户端和服务器端的一个通信,WebSocket分为客户端和服务端,所以我 ...
Python Day 67 Dango框架图解（总结）、Wsgiref和uwsgi、前后端传输数据的编码格式、From表单和Ajax方式在前端往后端发送文件、补充一下页面清缓存...
##Django框架图解 ##前后端传输数据的编码格式 #前后端传输数据的编码格式1.urlencoded 2.formdata 3.application/json ##From表单和Ajax方式在 ...
前端websocket获取数据后需要存本地吗_是什么让我放弃了restful api？了解清楚后我全面拥抱GraphQL...
GraphQL初步认识背景 REST作为一种现代网络应用非常流行的软件架构风格,自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史.它的简单易用性,可扩展性, ...
前端websocket获取数据后需要存本地吗_是什么让我放弃了Restful API？了解清楚后我全面拥抱GraphQL！...
背景 REST作为一种现代网络应用非常流行的软件架构风格,自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史.它的简单易用性,可扩展性,伸缩性受到广大Web开发 ...
Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）
阅读目录一.MVC与MTV 二.多对多表的创建三.ajax,前后端传输编码格式contentType 四.批量插入数据与自定义分页器摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端 ...
前端渲染与后端渲染的区别
前端渲染: 指的是后端返回JSON数据,前端利用预先写的html模板,循环读取JSON数据,拼接字符串(es6的模板字符串特性大大减少了拼接字符串的的成本),并插入页面. 好处:网络传输数据量小.不占 ...
前端渲染与后端渲染之间的区别？
前端没兴起之前,网页的展示大都是后端渲染,也就是服务器渲染. 随着前端行业的发展,前端的工作越来越精细.前后端开始分离,前端只关注ui渲染.后端只提供数据和进行逻辑处理. 简单的解释,前端写好html ...
【websocket前后端交互】vue-springboot实现websocket前后端交互链接，websocket心跳重连，包含前后端代码，复制即可用【详细解释版本】
前言: 还是老规矩,一步步的教大家如何建立前后端的 websocket 链接,并能完成互相传送数据的简单功能.由于网上找了半天发现很多帖子都是东一句西一句的,要不就是写的没什么注释和解释,导致我这个前 ...
WebSocket前后端联调
WebSocket前后端联调问题简介最近由于要进行态势推演的开发,该功能需要实现多个websocket的管理,因此,在进行开发时,学习了关于前后端联调的一些细节,记录一下.该文章主要描述如何高效 ...

前端websocket和后端传输数据

前端websocket和后端传输数据相关推荐

最新文章

热门文章