node-app-test/index.html at master · iwabuchi404/node-app-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tset app</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"></link>

</head>
<body>
    <main id="container">
        <h1>test_</h1>
        <div>
            <ul class="message-area">
                <li v-for="(message, index) in message_list">{{ message }}</li>
            </ul>
            <ul class="system-area">
                <li v-for="(system_message, index) in system_messages">{{ system_message }}</li>
            </ul>
        </div>
        <div>
            <input type="text" v-model="name" >
            <span> : </span>
            <input type="text" v-model="message" >
            <button v-on:click="sendMassage(name, message)">send</button>
        </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
    <script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
    <script>
        let main_vm = new Vue({
          el: '#container',
          data: {
            socket: "",
            message_list:[],
            users: [],
            system_messages: [],
            message: "",
            name: "nanasi",
          },
          created: function(){

          },
          mounted: function(){
            this.chat_init()
          },
          methods: {
            chat_init: function(){
                let self = this
                self.connect()
                self.socket.on("send_message", function(msg){
                    console.log(msg)
                    self.message_list.unshift(msg.name+" : "+msg.message)
                })
                self.socket.on("sys_message_send", function(msg){
                    self.system_messages.unshift(msg.message)
                })
            },
            connect: function(){
                let self = this
                // self.socket = io.connect("http://localhost:8000")ローカル
                self.socket = io.connect()
                self.socket.on("connect", function (val) {
                    self.system_messages.unshift("connect "+val)
                });
            },
            sendMassage: function(name, msg) {
                console.log(msg)
                if(msg){
                    this.socket.emit("send_message", { name: name, message : msg })
                    this.message_list.unshift("you : "+msg)
                    this.message = ""
                }
            },
            clickBtn: function(item){
              console.log(item)
              document.querySelector('.title').classList.add('is-hidden');
            }
          }
        })
    </script>
</body>
</html>