MQTT_Chat/test.html at main · spheal363/MQTT_Chat · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html">
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div id="user" class="name">
        <input v-model="uName" class="name-input">{{uName}}</div>

    <div class="chat-container">
        <div id="msgView" class="message-container">
            <div id="msgView" class="msg-view">
                <div v-for="message in msg" v-bind:class="message.classname">
                    <p class="from">
                        <span>{{ message.from }}</span>
                    </p>
                    <div class="message" v-if="!message.isImage">
                        <span class="baloon">{{ message.c }}</span>
                        <div class="date-container">
                            <span class="date">{{ message.read }}
                                <br>{{ message.date }}</span>
                        </div>
                    </div>
                    <div v-else>
                        <img :src=message.c alt="Message Image" class="message-image" width="300" height="300">
                        <div class="date-container">
                            <span class="date">{{ message.read }}
                                <br>{{ message.date }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <!-- スタンプの実装 -->
        <button @click="sendImage" id="image" class="send-image-button">スタンプを送信</button>
        <div class="input-container" id="input" class="input">
            <input type="text" @keyup.enter="submit" v-model="msg.c" placeholder="メッセージを入力してください" class="message-input">
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script src="form.js"></script>

<script>
    // 特定のキーワードに反応:課題➁
    function changeBackground() {
        var url_k = "雲の画像のURL";
        var url_s = "夏の画像のURL";
        var div = document.getElementById("msgView");
        div.style.backgroundImage = `url(${url_s})`;
        setTimeout(() => {
            div.style.backgroundImage = `url(${url_k})`;
        }, 3000);
    }

    clientID = '自分の名前'; // 自由に付けられるが，他の人と被らないようにすること
    topic = 'test'; // トピックを任意に作成

    // クライアントインスタンスを作成(XXX.XXX.XXX.XXXはEMQXを立ち上げた端末のIPアドレス)
    client = new Paho.MQTT.Client("[email protected]", 8083, clientID);

    // コールバックハンドラを設定
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // クライアントをEMQXに接続させる（購読者になる）
    client.connect({ onSuccess: onConnect });

    // EMQXと接続できなかったら
    function failConnect(e) {
        console.log('failed!');
        console.log(e);
    }

    // クライアントがEMQXに接続したときに呼び出される
    function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("onConnect");
        subscribe();
    }

    // EMQXにメッセージを送信
    function publish(msg){
        message = new Paho.MQTT.Message(msg);
        message.destinationName = topic;
        client.send(message);
    }

    // EMQXからトピック「test」を購読
    function subscribe() {
        console.log('subscribe');
        client.subscribe(topic);
    }

    // クライアントがEMQXからメッセージを受け取ったときに呼び出される
    function onMessageArrived(message) {
        console.log('onMessageArrived:'+ message.payloadString);
        msgView.update(message.payloadString); //vue.jsのメソッド

        // メッセージに「夏」が含まれているかチェック:課題➁
        if (message.payloadString.includes('夏')) {
            changeBackground();
        }

    }

    //　EMQXとの接続が切れたときに呼び出される
    function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
            console.log("onConnectionLost:"+responseObject.errorMessage);
        }
    }

</script>
</html>