update: 更优雅的web演示

flxxyz · Jun 23, 2020 · 1cb1c47 · 1cb1c47
1 parent 9db1867
commit 1cb1c47
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 123 deletions.
diff --git a/example/web/gift.json b/example/web/gift.json
@@ -0,0 +1,50 @@
+{
+    "192": "赞(系统)",
+    "193": "弱鸡(系统)",
+    "519": "呵呵(系统)",
+    "520": "稳(系统)",
+    "712": "棒棒哒(系统)",
+    "714": "怂(系统)",
+    "824": "荧光棒",
+    "1859": "小飞碟",
+    "20000": "鱼丸",
+    "20001": "弱鸡",
+    "20002": "办卡",
+    "20003": "飞机",
+    "20004": "火箭",
+    "20005": "超级火箭",
+    "20006": "赞",
+    "20008": "超大丸星",
+    "20234": "爱心飞机",
+    "20387": "心动火箭",
+    "20417": "福袋",
+    "20541": "大气",
+    "20542": "666",
+    "20618": "魔法戒指",
+    "20624": "魔法皇冠",
+    "20626": "幸福券",
+    "20642": "能量电池",
+    "20643": "能量水晶",
+    "20644": "能量戒指",
+    "20709": "壁咚",
+    "20710": "金鲨鱼",
+    "20725": "宠爱卡",
+    "20726": "挚爱超火",
+    "20727": "乖乖戴口罩",
+    "20728": "勤洗手",
+    "20758": "打弱鸡",
+    "20760": "风暴超火",
+    "20761": "风暴火箭",
+    "20885": "告白书",
+    "20886": "告白卡",
+    "20887": "告白飞机",
+    "20888": "告白火箭",
+    "20889": "告白超火",
+    "20900": "小厨娘",
+    "20914": "开黑券",
+    "20940": "狂欢卡",
+    "20941": "狂欢火箭",
+    "20951": "狂欢趴",
+    "20952": "狂欢飞机",
+    "20953": "狂欢超火"
+}
diff --git a/example/web/host.json b/example/web/host.json
@@ -0,0 +1 @@
+{"url":"https://a-sh-cn.machine.flxxyz.com/gift.php"}
diff --git a/example/web/index.html b/example/web/index.html
@@ -5,18 +5,144 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>演示页面</title>
+    <script src="https://flxxyz.github.io/douyudm/dist/douyudanmaku.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <style>
+        .messageList {
+            text-decoration: none;
+            margin: 0;
+            padding: 0;
+            overflow-y: scroll;
+        }
+    </style>
 </head>
 
 <body>
-    <div>
-        <input id="roomId" type="number" placeholder="请输入房间号" value="">
-        <button id="s">确定</button>
-        <span id="tips"></span>
+    <div id='app'>
+        <div>
+            <input type='number' placeholder='请输入房间号' v-model='roomId'>
+            <button @click='enter'>确定</button>
+            <span>{{ tips }}</span>
+        </div>
+        <hr>
+        <ul class='messageList' :style='{height: messageListHeight}'>
+            <message v-for='message in messageList' :key='message.id' :message='message' />
+        </ul>
     </div>
-    <hr>
-    <ul id="messages" style="text-decoration:none;margin:0;padding:0;overflow-y:scroll;"></ul>
-    <script src="https://flxxyz.github.io/douyudm/dist/douyudanmaku.min.js"></script>
-    <script src="./index.js"></script>
+
+    <script>
+        Vue.component('message', {
+            template: '<li :id="className">{{ message.content }}</li>',
+            props: ['message'],
+            computed: {
+                className() {
+                    return `message-${this.message.id}`
+                }
+            },
+            mounted() {
+                document.querySelectorAll('li')[document.querySelectorAll('li').length - 1].scrollIntoView()
+            }
+        })
+
+        var app = new Vue({
+            el: '#app',
+            data() {
+                return {
+                    roomId: '231059',
+                    tips: '',
+                    messageList: [],
+                    messageListHeight: 'auto',
+                    room: null,
+                    closed: null,
+                    isClosed: true,
+                    gift: {},
+                }
+            },
+            methods: {
+                enter: function () {
+                    var txt = ''
+                    if (this.roomId && this.roomId > 0) {
+                        console.log('enter', this.roomId)
+
+                        //等待链接关闭再连接
+                        if (this.closed) {
+                            if (this.room) {
+                                this.room.logout()
+                            }
+                            return;
+                        }
+
+                        if (this.isClosed) {
+                            this.start(this.roomId)
+                        }
+
+                        this.closed = setInterval(() => {
+                            if (this.room.ws.socket.readyState === 3) {
+                                this.start(this.roomId)
+                            }
+                        }, 5)
+                    } else {
+                        txt = '请输入正确的房间号'
+                    }
+                    this.tips = txt
+                },
+                start: function (id) {
+                    this.isClosed = true
+                    this.messageList = []
+                    var echo = this.echo
+                    this.room = new danmaku(id)
+                    this.room.on('connect', () => {
+                        echo(`[connect] roomId=${id}`)
+                    })
+                    this.room.on('disconnect', () => {
+                        echo(`[disconnect] roomId=${id}`)
+                    })
+                    this.room.on('error', err => {
+                        echo(`[error] roomId=${id} ${err}`)
+                    })
+                    this.room.on('uenter', function (res) {
+                        echo(`[uenter] ${res.nn}进入房间`)
+                    })
+                    this.room.on('chatmsg', function (res) {
+                        echo(`[chatmsg] <lv ${res.level}> [${res.nn}] ${res.txt}`)
+                    })
+                    this.room.on('dgb', res => {
+                        var gf = this.gift[res.gfid] || '未知礼物'
+                        echo(`[dgb] 感谢${res.nn}送出${gf}  礼物id=${res.gfid}`)
+                    })
+                    this.room.run()
+                    this.isClosed = false
+                },
+                resize: function () {
+                    console.log('onresize')
+                    this.messageListHeight = (document.documentElement.clientHeight - 60) + 'px'
+                    var li = document.querySelectorAll('li')
+                    var liLast = li[li.length - 1]
+                    if (typeof liLast !== 'undefined') {
+                        liLast.scrollIntoView()
+                    }
+                },
+                echo: function (message) {
+                    console.log(message)
+                    this.messageList.push({
+                        id: this.uuid(),
+                        content: message,
+                    })
+                },
+                uuid: function () {
+                    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                        let r = Math.random() * 16 | 0,
+                            v = c == 'x' ? r : r & 0x3 | 0x8;
+                        return v.toString(16);
+                    });
+                }
+            },
+            mounted() {
+                this.resize()
+                window.onresize = this.resize
+            },
+        })
+    </script>
 </body>
 
 </html>
diff --git a/example/web/index.js b/example/web/index.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"url":"https://a-sh-cn.machine.flxxyz.com/gift.php"}