WebSocket服务器+vue

php代码

<?php
$server = new Swoole\WebSocket\Server("0.0.0.0", 10002);

$server->on('open', function (Swoole\WebSocket\Server $server, $request) {
    echo "握手成功 fd{$request->fd}\n";
    $datas = json_encode($request);
    $server->push($request->fd,"给你数据{$datas} \n");

});

$server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
    echo "接收客户端消息: {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
    $server->push($frame->fd, "this is server");
});

$server->on('close', function ($ser, $fd) {
    echo "客户端 {$fd} 关闭\n";
});
echo  "websocket服务器启动成功\n";

$server->start();

vue

    mounted(){
      let _this = this
      var wsServer = 'ws://域名:10002';
      _this.websocket = new WebSocket(wsServer);
      _this.websocket.onopen = function (evt) {
          console.log("连接成功");
          //发送数据
          _this.websocket.send('大得来了')
      };

      _this.websocket.onclose = function (evt) {
          console.log("关闭");
      };

      _this.websocket.onmessage = function (evt) {
          console.log('数据: ' + evt.data);
      };

      _this.websocket.onerror = function (evt, e) {
           console.log('错误: ' + evt.data);
      };

    },
    //页面销毁时关闭长连接
    destroyed() {
　　　　 this.websocket.close();
　　 },

 

 

简单例如

var wsServer = 'ws://ip:10002';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
   console.log("连接成功");
   //发送数据
   websocket.send('大得来了')
};

websocket.onclose = function (evt) {
    console.log("关闭");
};

websocket.onmessage = function (evt) {
    console.log('数据: ' + evt.data);
};

websocket.onerror = function (evt, e) {
    console.log('错误: ' + evt.data);
};

//主动关闭
websocket.close();