我比較喜歡聽音樂，特別是周末的時(shí)候，電腦開著百度隨心聽fm，隨機(jī)播放歌曲，躺在床上享受。但碰到了一個(gè)煩人的事情，想切掉不喜歡的曲子，還得起床去操作電腦換歌。于是思考能不能用手機(jī)控制電腦切換歌曲，經(jīng)過一段事件的思考，絕對(duì)采用html5+socket.io來實(shí)現(xiàn)這個(gè)功能。首先我把該功能的實(shí)現(xiàn)拆分為以下幾個(gè)步驟：

  1. 移動(dòng)端前端頁面+腳本邏輯實(shí)現(xiàn)

  2. PC端前端頁面+腳本邏輯實(shí)現(xiàn)

  3. 后臺(tái)邏輯實(shí)現(xiàn)

  4. 加入socket.io實(shí)現(xiàn)長(zhǎng)連接

  5. 實(shí)現(xiàn)移動(dòng)端控制PC端邏輯

下文中的代碼有不全的地方，大家可以查看我的Github項(xiàng)目源碼https://github.com/zhu495472831/shake-music。

1、移動(dòng)端頁面腳本的實(shí)現(xiàn)

html頁面編寫
仿造微信搖一搖的頁面，實(shí)現(xiàn)一個(gè)類似的界面，如下所示：
photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)
當(dāng)我們搖手機(jī)的時(shí)候，會(huì)做一個(gè)動(dòng)畫，中間的圖案一分為二，上半部向上運(yùn)動(dòng)然后回來，下半部亦同理，如下所示：
photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動(dòng)軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)
html代碼(shake.html)：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>搖一搖切歌</title>
&n