javascript - socket.on not working in client side

I'm studying nodejs + vuejs + socket.io Testing sending message and reciving on server side and client side.

On server side is working, I'm recieving the console(message: text) But, the console.log on the client side is not working. Nothing appears.

index.html:

<script src="/socket.io/socket.io.js"></script>
<body>
     <div class="container" id="todo">
      <h1><%= title %></h1>
      <h3>{{subtitle}}</h3>
      <p>Wele to <%= title %></p>
      <div id="app-5">
       <p>{{ subtitle }}</p>
       <button v-on:click="sendMessage">Send Message</button>
      </div>
     </div>
</body>
<script src=".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 server:

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

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

I'm recieving the message on terminal server. But not recieving the console.log('Client side message: ' + msg) on the browser.

I'm studying nodejs + vuejs + socket.io Testing sending message and reciving on server side and client side.

On server side is working, I'm recieving the console(message: text) But, the console.log on the client side is not working. Nothing appears.

index.html:

<script src="/socket.io/socket.io.js"></script>
<body>
     <div class="container" id="todo">
      <h1><%= title %></h1>
      <h3>{{subtitle}}</h3>
      <p>Wele 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./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 server:

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

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

I'm recieving the message on terminal server. But not recieving the console.log('Client side message: ' + msg) on the browser.

Share Improve this question edited Jan 20, 2017 at 10:41 jophab 5,52714 gold badges44 silver badges61 bronze badges asked Jan 19, 2017 at 20:54 Igor Martins 2,0477 gold badges37 silver badges59 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

This is mainly a socket.io question. You are emitting an event from the client:

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

and then listening on that event on the server:

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

which makes sense and, as you say yourself, works fine: the message gets logged on the server.

However, listening on the chat message event on the client:

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

does not work until the server has emitted this event.

In other words, try executing:

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

on the server to see Hello World logged on the client.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - socket.on not working in client side - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)