iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 15
1
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 15

十五號坑,匿名登入的行前說明Socket事件

做匿名登入之前,先來提一下會用到的socket相關

Client端發出 socket.emit('事件名稱', data),在server端的socket就會相對應一個 socket.on('事件名稱',func)

Client發出

this.$socket.emit('login',memberData)

Server端接收

io.on('login',data => {
    console.log(data)
    // ...
})

另外也可以帶callback function
Client發出

this.$socket.emit('login',memberData,function() {
  // ...
})

Server端接收

io.on('login',(data,fn) => {
    console.log(data)
    fn() //執行callback
    // ...
})

Client端一旦發出事件,server端就會收到,並作出對應的處理,相反的,也有server端發出emit,client接收的

Server端

io.emit('loginSuccess', memberData)

Client有一點差異,就是必須先監聽相關事件名稱,如果是全程監聽,我會在mounted裡做

mounted(){
  this.$socket.on("loginSuccess", this.loginSuccess)
  // this.$socket.on("監聽事件名稱", 監聽到時觸發的func)
}

並且在beforeDestroy做相對應的移除監聽

beforeDestroy() {
  this.$socket.off("loginSuccess");
}

然後就在methods裡處理func

methods:{
    loginSuccess(data){
        console.log(data)
    }
}

socketId

接下來會提到的是在server端的內容

每次連上Socket的時候,都會得到一個socketId,這個socketId可以用在單獨發送事件

剛剛前面我們server端的發送事件用io.emit('loginSuccess', memberData),這個用法是給所有線上的連線全部發送同一事件,如果想要單獨發送給自己,可以用.to()指定對象

io.to(socket.id).emit('loginSuccess',memberData)

就可以針對單獨的對象發送訊息,如果是兩個人互相通訊,只要知道對方的socketId就可以用這個方式互傳訊息


廢文:
每次想到下一篇要寫哪一個的時候,就會越寫越長,因為邊寫就會發現有些東西還沒講就在用,然後就又倒退回來寫,如果沒有提前一天先寫,當天大概就會很慘吧...(掩面)

而且code那邊,每次寫一段就會改一部分,怕之後code進度趕不上文章進度,有點懷疑最後到底文章跟code對不對的起來XD

最後就是不要問我為什麼這篇沒有在之前的socket那篇就寫上去


上一篇
十四號坑,Enter送出訊息-鍵盤事件
下一篇
十六號坑,匿名登入
系列文
每日挖個坑,用坑填起耍廢聊天室!30

1 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2019-10-01 11:33:15

反正趕快做好~我們上班就可以聊天了(灑花/images/emoticon/emoticon42.gif 大誤

hmmmm 不是沒做好也上班聊天嗎

我和你說~這是一個專業度的問題(屁)!
用VScode聊天看起來比較profession,很認真在寫code的感覺
( 整個大誤

我要留言

立即登入留言