55 < meta charset ="UTF-8 ">
66 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
77 < title > 演示页面</ title >
8+ < script src ="https://flxxyz.github.io/douyudm/dist/douyudanmaku.min.js "> </ script >
9+ < script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "> </ script >
10+ < style >
11+ .messageList {
12+ text-decoration : none;
13+ margin : 0 ;
14+ padding : 0 ;
15+ overflow-y : scroll;
16+ }
17+ </ style >
818</ head >
919
1020< body >
11- < div >
12- < input id ="roomId " type ="number " placeholder ="请输入房间号 " value ="">
13- < button id ="s "> 确定</ button >
14- < span id ="tips "> </ span >
21+ < div id ='app '>
22+ < div >
23+ < input type ='number ' placeholder ='请输入房间号 ' v-model ='roomId '>
24+ < button @click ='enter '> 确定</ button >
25+ < span > {{ tips }}</ span >
26+ </ div >
27+ < hr >
28+ < ul class ='messageList ' :style ='{height: messageListHeight} '>
29+ < message v-for ='message in messageList ' :key ='message.id ' :message ='message ' />
30+ </ ul >
1531 </ div >
16- < hr >
17- < ul id ="messages " style ="text-decoration:none;margin:0;padding:0;overflow-y:scroll; "> </ ul >
18- < script src ="https://flxxyz.github.io/douyudm/dist/douyudanmaku.min.js "> </ script >
19- < script src ="./index.js "> </ script >
32+
33+ < script >
34+ Vue . component ( 'message' , {
35+ template : '<li :id="className">{{ message.content }}</li>' ,
36+ props : [ 'message' ] ,
37+ computed : {
38+ className ( ) {
39+ return `message-${ this . message . id }
40+ }
41+ } ,
42+ mounted ( ) {
43+ document . querySelectorAll ( 'li' ) [ document . querySelectorAll ( 'li' ) . length - 1 ] . scrollIntoView ( )
44+ }
45+ } )
46+
47+ var app = new Vue ( {
48+ el : '#app' ,
49+ data ( ) {
50+ return {
51+ roomId : '231059' ,
52+ tips : '' ,
53+ messageList : [ ] ,
54+ messageListHeight : 'auto' ,
55+ room : null ,
56+ closed : null ,
57+ isClosed : true ,
58+ gift : { } ,
59+ }
60+ } ,
61+ methods : {
62+ enter : function ( ) {
63+ var txt = ''
64+ if ( this . roomId && this . roomId > 0 ) {
65+ console . log ( 'enter' , this . roomId )
66+
67+ //等待链接关闭再连接
68+ if ( this . closed ) {
69+ if ( this . room ) {
70+ this . room . logout ( )
71+ }
72+ return ;
73+ }
74+
75+ if ( this . isClosed ) {
76+ this . start ( this . roomId )
77+ }
78+
79+ this . closed = setInterval ( ( ) => {
80+ if ( this . room . ws . socket . readyState === 3 ) {
81+ this . start ( this . roomId )
82+ }
83+ } , 5 )
84+ } else {
85+ txt = '请输入正确的房间号'
86+ }
87+ this . tips = txt
88+ } ,
89+ start : function ( id ) {
90+ this . isClosed = true
91+ this . messageList = [ ]
92+ var echo = this . echo
93+ this . room = new danmaku ( id )
94+ this . room . on ( 'connect' , ( ) => {
95+ echo ( `[connect] roomId=${ id } )
96+ } )
97+ this . room . on ( 'disconnect' , ( ) => {
98+ echo ( `[disconnect] roomId=${ id } )
99+ } )
100+ this . room . on ( 'error' , err => {
101+ echo ( `[error] roomId=${ id } ${ err } )
102+ } )
103+ this . room . on ( 'uenter' , function ( res ) {
104+ echo ( `[uenter] ${ res . nn } )
105+ } )
106+ this . room . on ( 'chatmsg' , function ( res ) {
107+ echo ( `[chatmsg] <lv ${ res . level } ${ res . nn } ${ res . txt } )
108+ } )
109+ this . room . on ( 'dgb' , res => {
110+ var gf = this . gift [ res . gfid ] || '未知礼物'
111+ echo ( `[dgb] 感谢${ res . nn } ${ gf } ${ res . gfid } )
112+ } )
113+ this . room . run ( )
114+ this . isClosed = false
115+ } ,
116+ resize : function ( ) {
117+ console . log ( 'onresize' )
118+ this . messageListHeight = ( document . documentElement . clientHeight - 60 ) + 'px'
119+ var li = document . querySelectorAll ( 'li' )
120+ var liLast = li [ li . length - 1 ]
121+ if ( typeof liLast !== 'undefined' ) {
122+ liLast . scrollIntoView ( )
123+ }
124+ } ,
125+ echo : function ( message ) {
126+ console . log ( message )
127+ this . messageList . push ( {
128+ id : this . uuid ( ) ,
129+ content : message ,
130+ } )
131+ } ,
132+ uuid : function ( ) {
133+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' . replace ( / [ x y ] / g, function ( c ) {
134+ let r = Math . random ( ) * 16 | 0 ,
135+ v = c == 'x' ? r : r & 0x3 | 0x8 ;
136+ return v . toString ( 16 ) ;
137+ } ) ;
138+ }
139+ } ,
140+ mounted ( ) {
141+ this . resize ( )
142+ window . onresize = this . resize
143+ } ,
144+ } )
145+ </ script >
20146</ body >
21147
22148</ html >
0 commit comments