socket.on 在客户端不起作用答案

【问题标题】：socket.on not working in client sidesocket.on 在客户端不起作用
【发布时间】：2017-06-04 17:24:59
【问题描述】：

我正在研究 nodejs + vuejs + socket.io 在服务器端和客户端测试发送和接收消息。

服务器端正在工作，我正在接收控制台（消息：文本） 但是，客户端的console.log 不起作用。什么都没有出现。

index.html:

<script src="/socket.io/socket.io.js"></script>
<body>
     <div class="container" id="todo">
      <h1><%= title %></h1>
      <h3>{{subtitle}}</h3>
      <p>Welcome to <%= title %></p>
      <div id="app-5">
       <p>{{ subtitle }}</p>
       <button v-on:click="sendMessage">Send Message</button>
      </div>
     </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="/javascripts/app.js"></script>

app.js：

var socket = io();

var vm = new Vue({
 el: '#todo',
  data: {
   subtitle: 'Hello Vue.js!',
   text: 'Hello Friends',
   menssages: []
 },
 methods: {
  sendMessage: function () {
   socket.emit('chat message', this.text);
  }
}
});

socket.on('chat message', function(msg){
 console.log('Client side message: ' + msg)
});

nodejs 服务器：

io.on( "connection", function( socket ) {
console.log( "A user connected" );

socket.on('chat message', function(msg){
  console.log('messagem: ' + msg);
});
});

我正在终端服务器上接收消息。但在浏览器上没有收到console.log('Client side message: ' + msg)。

【问题讨论】：

标签： javascript node.js socket.io vue.js

【解决方案1】：

这主要是一个socket.io问题。您正在从客户端发出一个事件：

socket.emit('chat message', this.text);

然后在服务器上监听该事件：

socket.on('chat message', function(msg){
  console.log('messagem: ' + msg);
});

这是有道理的，正如您自己所说，工作正常：消息被记录在服务器上。

但是，在客户端监听 chat message 事件：

socket.on('chat message', function(msg){
 console.log('Client side message: ' + msg)
});

在服务器发出此事件之前不起作用。

换句话说，尝试执行：

socket.emit('chat message', 'Hello World.');

在服务器上查看Hello World 登录到客户端。

【讨论】：

谢谢先生。这个socket.emit在socket.on('chat message'...里面？
如果你愿意的话。