GatewayWorker + VUE进行weosocket长连接通讯

àì夳堔傛蜴生んèń 2021-12-12 16:49 283阅读 0赞

VUE.js代码：

<script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          websoket:null,
        }
      },
      created () {
        this.initWebSocket();
    
      },
      methods:{
        initWebSocket(){ //初始化weosocket
          const wsuri = "ws://127.0.0.1:7272";
          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 = {"type":"login","client_name":"yy","room_id":"1"};
          this.websocketsend(JSON.stringify(actions));
        },
        websocketonerror(){//连接建立失败重连
          this.initWebSocket();
        },
        websocketonmessage(e){ //数据接收
          const data = JSON.parse(e.data);
          switch(data['type']){
            // 服务端ping客户端
            case 'ping':
              let ty ={"type":"pong"};
              this.websocketsend(JSON.stringify(ty));
              break;
            case 'say':
              let say ={"type":"tyy","to_client_id":"all","to_client_name":"所有人","content":"你好"};
              this.websocketsend(JSON.stringify(say));
              break;
            // 登录 更新用户列表
    
          }
        },
        websocketsend(Data){//数据发送
          this.websock.send(Data);
        },
        websocketclose(e){  //关闭
          console.log('断开连接',e);
        },
    
      }
    }
    </script>

`GatewayWorker`中`Events`文件`onMessage`中也进行`switch`进行客户端消息类型进行识别  
如：

case 'say':
    return Gateway::sendToGroup($room_id ,json_encode($new_message));

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关长连接、短连接

1. 短连接：短连接是一种即时连接方式，客户端发送请求后，服务器响应后立即关闭连接。每个请求和响应都需要建立新的连接，因此在频繁通

秒速五厘米/ 2024年02月21日 11:15/ 0 赞/ 40 阅读

相关组件通讯（vue）

一、属性传值 1.可传值类型固定值绑定属性方法本类对象 2.操作步骤 ①.父组件调用子组件的时候，绑定动态属性 <htitle me

本是古典何须时尚/ 2022年11月11日 13:10/ 0 赞/ 136 阅读

相关 t-io: 百万级TCP长连接即时通讯框架

t-io: 百万级TCP长连接即时通讯框架，让天下没有难开发的即时通讯 t-io是基于jdk aio实现的易学易用、稳定、性能强悍、

今天药忘吃喽~/ 2022年06月15日 08:15/ 0 赞/ 1657 阅读

相关 websocket 长连接

首先看一下什么是长连接,短连接长连接的定义: 长连接是一旦一个客户端登陆上服务器，其与服务器之间的连接就不关闭，不管他们之间进行了多少次交易，直到客户端退出登陆或

小灰灰/ 2022年05月23日 13:53/ 0 赞/ 207 阅读

相关 http长连接

基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性。一、什么是长连接、长轮询？

不念不忘少年蓝@/ 2022年05月10日 08:50/ 0 赞/ 176 阅读

相关 linux不同终端进行通讯

1.执行ctl+shift+n 两次，打开两个终端 2.查看终端，执行tty 3.执行 echo 自定义内容 > 另一个终端所有终端进行通知，广播 4.执行shutd

逃离我推掉我的手/ 2022年04月02日 15:35/ 0 赞/ 194 阅读

相关 VUE连接MQTT即时通讯

MQTT安装 MQTT安装EMQ安装请参考上一篇：[CentOS7.0安装EMQ代理服务][CentOS7.0_EMQ] npm安装 npm

迈不过友情╰/ 2022年02月26日 04:56/ 0 赞/ 1081 阅读

相关 GatewayWorker与Thinkphp3.2.3开发即时通讯详细流程

GatewayWorker是workerman的框架，里面封装了很多好用的方法，比直接使用workerman要方便的多。尤其在和其他MVC框架对接时，就更加方便了。 Linu

冷不防/ 2022年02月18日 10:49/ 0 赞/ 794 阅读

相关 GatewayWorker + VUE进行weosocket长连接通讯

VUE.js代码： <script> export default { name: 'HelloWorld', data () {

àì夳堔傛蜴生んèń/ 2021年12月12日 16:49/ 0 赞/ 284 阅读

相关 Vue组件通讯

![70][] 1. 自定义事件 Vue的子组件用$.emit()来触发事件，父组件用$.on()来监听子组件的的事件 <div id="app">

缺乏、安全感/ 2021年09月27日 15:02/ 0 赞/ 361 阅读