kzima
6/1/2014 - 4:18 AM

socket.io chat sample by vue.js http://socket.io/get-started/chat/

socket.io chat sample by vue.js http://socket.io/get-started/chat/

index.html
content_copyfile_download
<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <link href="/css/app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="chat">
      <ul class="messages" >
        <li v-repeat="messages" v-text="$value"></li>
      </ul>
      <form action="" v-on="submit: post">
        <input v-model="input" autocomplete="off" /><button>Send</button>
      </form>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.4/vue.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/app.js"></script>
    <script>
    </script>
  </body>
</html>
app.js
content_copyfile_download
var socket = io();

var vm = new Vue({
  el: "#chat",
  data: {
    messages: [],
    input: ""
  },
  methods: {
    post: function(e) {
      socket.emit('chat message', this.input);
      e.preventDefault();
    }
  }
});

socket.on('chat message', function(msg){
  vm.messages.push(msg);
});
app.css
content_copyfile_download
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 13px Helvetica, Arial;
}

form {
  background: #000;
  padding: 3px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

form input {
  border: 0;
  padding: 10px;
  width: 90%;
  margin-right: .5%;
}

form button {
  width: 9%;
  background: rgb(130, 224, 255);
  border: none;
  padding: 10px;
}

.messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.messages li {
  padding: 5px 10px;
}

.messages li:nth-child(odd) {
  background: #eee;
}