vue-websocket,vue3 websocket

　　本文主要介绍了某视频剪辑软件项目中使用求转发到的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

什么是websocket？

　　“WebSocket是HTML5开始提供的一种在单个三氯苯酚连接上进行全双工通讯的协议。

　　WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

　　在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。"

　　1.在实用工具下新建websocket.js文件

　　//从" @/utils/popInfo "导入{ showInfoMsg，showErrorMsg }

　　从"元素-用户界面"导入ElementUI

　　函数initWebSocket(e) {

　　console.log(e)

　　const wsUri=WS _ API /web socket/ e；

　　这个。socket=新的web套接字(wsUri)//这里面的这都指向某视频剪辑软件

　　这个。插座。on error=webSocketOnError

　　这个。插座。on message=webSocketOnMessage

　　这个。插座。on close=closeweb套接字；

　　}

　　函数webSocketOnError(e) {

　　元素用户界面.通知({

　　标题： ,

　　消息：" WebSocket连接发生错误e，

　　类型："错误",

　　持续时间：0,

　　});

　　}

　　函数webSocketOnMessage(e) {

　　const data=JSON。解析(数据)；

　　控制台。log(data.msgType===INFO ，data。msgtype=== INFO )

　　if (data.msgType===INFO) {

　　元素用户界面.通知({

　　标题： ,

　　消息：data.msg，

　　类型："成功",

　　时长：3000,

　　});

　　} else if(数据。msgtype=== ERROR ){

　　元素用户界面.通知({

　　标题： ,

　　消息：data.msg，

　　类型："错误",

　　持续时间：0,

　　});

　　}

　　}

　　//关闭websiocket

　　函数closeWebsocket() {

　　console.log(连接已关闭.)

　　}

　　函数close() {

　　this.socket.close() //关闭求转发到

　　这个。插座。onclose=函数(e){

　　console.log(e)//监听关闭事件

　　console.log(关闭)

　　}

　　}

　　函数webSocketSend(agentData) {

　　这个。插座。发送(代理数据)；

　　}

　　导出默认值{

　　initWebSocket，关闭

　　}

　　如果想刷新重新链接websocket 可以在App.vue页面里添加个钩子函数

　　已安装(){

　　//当在任一路由页面被刷新时，便是根组件应用被从新建立，此时能够进行求转发到重连

　　//从本地存储中获取用户信息，是登陆状态则能够进行求转发到重连

　　让token=本地存储。getitem( token )；

　　if (token) {

　　//用户消息=JSON。解析(用户消息)；

　　这个web套接字。初始化web套接字(令牌)；

　　}

　　},

　　客户端主动关闭求转发到在关闭的地方触发函数就可以

　　注销(){

　　//本地存储。clear()；

　　本地存储。移除项目(“令牌”)；

　　这个web套接字。close()；

　　这个store.dispatch(LogOut ).然后(()={

　　位置。重载()；

　　});

　　},

　　注：$webSocket 是在main.js中全局注册了websocket.js文件

　　到此这篇关于某视频剪辑软件项目中使用求转发到的实现的文章就介绍到这了，更多相关某视频剪辑软件使用求转发到内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。