css socket.io聊天示例来自vue.js http://socket.io/get-started/chat/

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css socket.io聊天示例来自vue.js http://socket.io/get-started/chat/相关的知识，希望对你有一定的参考价值。

<!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>

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);
});



* {
  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;
}

以上是关于css socket.io聊天示例来自vue.js http://socket.io/get-started/chat/的主要内容，如果未能解决你的问题，请参考以下文章

Socket.io聊天示例node.js需要

如何从 Vue.js 组件连接到 socket.io？

聊天系统Vue.jsReact.jsnode.jsMongoDBwebsocketsocket.io前后端分离毕

socket.io 聊天示例 -sails.js

一次与两个用户随机聊天（Socket.io）

js节点-socket.io聊天修改