GatewayWorker + VUE进行weosocket长连接通讯

àì夳堔傛蜴生んèń 2021-12-12 16:49 301阅读 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 条评论，301人围观）

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

相关阅读

相关长连接、短连接

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

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

相关组件通讯（vue）

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

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

相关 Springboot下使用WebSocket和浏览器进行长连接通信

WebSocket是Html5里面的一个东西。 WebSocket有别于从前的Http协议,http是无状态的。请求了一次服务器，下一次请求连自己都不知道自己上一次请求了什么

﹏ヽ暗。殇╰゛Y/ 2022年07月15日 07:19/ 0 赞/ 234 阅读

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

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

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

相关深入理解GatewayWorker框架

原文地址:[http://www.php-master.com/post/342621.html][http_www.php-master.com_post_342621.h

￡神魔★判官ぃ/ 2022年04月13日 03:55/ 0 赞/ 350 阅读

相关 linux不同终端进行通讯

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

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

相关 VUE连接MQTT即时通讯

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

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

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

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

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

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

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

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

相关 Vue组件通讯

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

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