Vuejs：socket-io-client的活动不会触发

Question

我在vue中使用了socket.io客户端。

socket.io服务器端很好。但是客户端不会触发套接字服务器广播事件。

在创建vue组件的提升周期时，然后创建一个 socket.on（“新消息”）事件注册。

有人单击“发布”按钮，然后触发方法“ sendMessage”。

该方法中有一个 socket.emit（“新消息”，消息）。

问题：

socket.emit（'新消息'，消息）可以，

但不会触发 socket.on（'新消息'，function（）{...}） 。

  

这是浏览器调试的快照

  

这是我在客户端的代码。

import io from 'socket.io-client'
const socket = io('http://localhost:2020')

export default {
  data () {
    return {
      isConnected: true,
      socketMessage: '',
      inputMessage: '',
      tableData: []
    }
  },
  mounted () {
  },
  watch: {
    inputMessage (value) {
      console.log('input:' + value)
    }
  },
  created () {
    let that = this
    console.log('create-socket-listener')
    socket.on('new message', (data) => {
      console.log('soemthing-created')
      that.tableData.push(data)
    })
  },
  methods: {
    sendMessage () {
      let name = Math.random()
      this.addUsername(name)
      let message = this.inputMessage
      this.inputMessage = ''
      if (message && this.isConnected) {
        socket.emit('new message', message)
      }
    },
    addUsername (name) {
      socket.emit('add user', name)
    },
    addChatMessage (data) {
      this.tableData.push(data)
    },
    sockeListener () {
      let that = this
      socket.on('new message', function (data) {
        that.addChatMessage(data)
      })
    }
  }
}
</script>

  

用PHP-Socket编写的服务器代码

<?php
use Workerman\Worker;
use Workerman\WebServer;
use Workerman\Autoloader;
use PHPSocketIO\SocketIO;

// composer autoload
// require_once join(DIRECTORY_SEPARATOR, array(__DIR__, "..", "..", "vendor", "autoload.php"));
require_once __DIR__ . "/vendor/autoload.php";
$io = new SocketIO(2020);
$io->on('connection', function($socket){
    $socket->addedUser = false;
    // when the client emits 'new message', this listens and executes
    $socket->on('new message', function ($data)use($socket){
        // we tell the client to execute 'new message'
        $socket->broadcast->emit('message', array(
            'date' => date('Y-m-d H:i:s'),
            'username'=> $socket->username,
            'message'=> $data
        ));
    });

    // when the client emits 'add user', this listens and executes
    $socket->on('add user', function ($username) use($socket){
        global $usernames, $numUsers;
        // we store the username in the socket session for this client
        $socket->username = $username;
        // add the client's username to the global list
        $usernames[$username] = $username;
        ++$numUsers;
        $socket->addedUser = true;
        $socket->emit('login', array( 
            'numUsers' => $numUsers
        ));
        // echo globally (all clients) that a person has connected
        $socket->broadcast->emit('user joined', array(
            'username' => $socket->username,
            'numUsers' => $numUsers
        ));
    });

    // when the client emits 'typing', we broadcast it to others
    $socket->on('typing', function () use($socket) {
        $socket->broadcast->emit('typing', array(
            'username' => $socket->username
        ));
    });

    // when the client emits 'stop typing', we broadcast it to others
    $socket->on('stop typing', function () use($socket) {
        $socket->broadcast->emit('stop typing', array(
            'username' => $socket->username
        ));
    });

    // when the user disconnects.. perform this
    $socket->on('disconnect', function () use($socket) {
        global $usernames, $numUsers;
        // remove the username from global usernames list
        if($socket->addedUser) {
            unset($usernames[$socket->username]);
            --$numUsers;

           // echo globally that this client has left
           $socket->broadcast->emit('user left', array(
               'username' => $socket->username,
               'numUsers' => $numUsers
            ));
        }
   });

});

if (!defined('GLOBAL_START')) {
    Worker::runAll();
}