上個(gè)月接到了我公司年會(huì)系統(tǒng)的需求，覺得做起來有些困難。后來硬著頭皮接下來了。年會(huì)1月6號(hào)順利舉行結(jié)束，整體上還算是成功，但是最后的搖1搖比賽出了些問題。在這里記錄下用到的技術(shù)，遇到的困難和選擇，和做的處理和不足。希望對(duì)大家有些參考。

先上1點(diǎn)結(jié)論和感想

1.做1個(gè)系統(tǒng)，需要權(quán)衡的維度，有以下幾個(gè)：

這就好比經(jīng)典的CAP理論，魚和熊掌不可兼得。這里尋求了時(shí)間（只有兩周多的開發(fā)時(shí)間），本錢（實(shí)際上不應(yīng)當(dāng)過分緊縮本錢），功能（做全所有功能），放低了安全與周密的要求（例如消息傳遞沒有加密，傳遞的消息沒有蓋時(shí)間戳驗(yàn)證流程，沒有完全的會(huì)話保持與權(quán)限控制等等），而且把代碼放到了GitHub上。
對(duì)1個(gè)針對(duì)普通大眾的年會(huì)，這么做多是沒問題的。但是對(duì)1個(gè)純程序員的年會(huì)，這么做就難免出問題（我們現(xiàn)場(chǎng)系統(tǒng)遭到了js注入，XSS注入，SQL注入還有指令注入攻擊。我們現(xiàn)場(chǎng)改代碼熱部署）。
現(xiàn)在回想，應(yīng)當(dāng)把1些功能做的更周密些，不應(yīng)當(dāng)過分緊縮本錢（其實(shí)就是多買兩臺(tái)服務(wù)器的事。。。）

2.對(duì)你做的系統(tǒng)，觸及到現(xiàn)場(chǎng)屏幕視覺設(shè)計(jì)的，1定要提早摹擬下視覺匹配

3.之前對(duì)Websocket的理解有誤，只在，對(duì)需要單向推送到客戶端（手機(jī)閱讀器）上的消息，應(yīng)當(dāng)都用Websocket，而不是采取客戶端輪詢。輪詢對(duì)服務(wù)器消耗太大。然后，其實(shí)更多情形應(yīng)當(dāng)用SSE

4. 對(duì)產(chǎn)品設(shè)計(jì)上，可能需要改變下自己程序員的思惟。程序員都有點(diǎn)because we can的思惟，這其實(shí)不都是缺點(diǎn)。但是把這個(gè)思惟用在設(shè)計(jì)產(chǎn)品上就掛了。這里的例子就是搖1搖抽獎(jiǎng)。這里我們沒用微信搖1搖的功能，而是用js監(jiān)控陀螺儀移動(dòng)而做的搖1搖，顯示的次數(shù)其實(shí)不是準(zhǔn)確的你搖動(dòng)的次數(shù)，可能會(huì)有很大偏差。但是我們把這個(gè)數(shù)字展現(xiàn)出來了，并且沒做說明，讓很多用戶認(rèn)為這個(gè)次數(shù)不公正，是我們私下做了手腳。

5.流程太繁瑣，走簡(jiǎn)單流程搶時(shí)間難免出問題。目前，內(nèi)部生產(chǎn)上線流程繁瑣而且時(shí)間長(zhǎng)。我們?nèi)绻扇〉脑挘块_發(fā)時(shí)間都得用來走上線流程。所以，沒采取公司資源，自己購買的騰訊云部署的利用，最后安全性出問題。如果走公司內(nèi)部流程做足檢查就不會(huì)出這些問題，但是時(shí)間上不允許。估計(jì)等公司變革完，這個(gè)情況會(huì)改良很多。

6. 彈幕做了服務(wù)降級(jí)，其實(shí)搖1搖那里也應(yīng)當(dāng)做服務(wù)降級(jí)

1. 需求的確立與任務(wù)的分配

剛開始，接到的需求主要有這幾個(gè)模塊：微信簽到上墻，CP簽到抽獎(jiǎng)，彈幕上墻，節(jié)目打賞，抽獎(jiǎng)，搖1搖比賽還有紅包鏈接展現(xiàn)。時(shí)間比較緊，基本上只有兩周多的時(shí)間去開發(fā)。
團(tuán)隊(duì)里面算上我1共4人，都是新人（我是最老的員工，剛畢業(yè)1.5年。。）。劃分了下任務(wù)，A同學(xué)負(fù)責(zé)簽到前端，抽獎(jiǎng)前后端，B同學(xué)負(fù)責(zé)節(jié)目管理打賞前端，搖1搖前端，C同學(xué)負(fù)責(zé)節(jié)目管理打賞前端，紅包鏈接展現(xiàn)前后端，CP簽到抽獎(jiǎng)，我負(fù)責(zé)微信簽到后端，微信接口調(diào)試和彈幕上前前后端。

2. 微信簽到開發(fā)

整體邏輯架構(gòu)設(shè)計(jì)：

微信開發(fā)回比較容易，文檔全，但是文檔有的更新不夠新，而且管理界面有時(shí)讓人第1次使用摸不著頭腦。不過嘗試出來如何配置后，還比較容易的。
首先，你得先去申請(qǐng)個(gè)微信公眾號(hào)，我們這里要用的微信功能有：網(wǎng)頁服務(wù)中的網(wǎng)頁賬號(hào)服務(wù)，微信JSAPI。搖1搖我們沒用微信的搖1搖功能，用的是js的振東事件。對(duì)微信簽到，我們只用到網(wǎng)頁服務(wù)中的網(wǎng)頁賬號(hào)服務(wù)，其他的其他功能會(huì)用到。
對(duì)公眾號(hào)，如果需要網(wǎng)頁賬號(hào)服務(wù)，則需要你的公眾號(hào)經(jīng)過認(rèn)證。搖1搖需要其他資質(zhì)認(rèn)證，比較麻煩所以我沒用。
對(duì)測(cè)試，可以先申請(qǐng)個(gè)微信測(cè)試號(hào)：http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
申請(qǐng)好后，我們看到：

2.1. 接口配置信息驗(yàn)證

這個(gè)是為了測(cè)試你的服務(wù)器是不是認(rèn)證良好，并且信任這臺(tái)服務(wù)器并把消息轉(zhuǎn)發(fā)給這臺(tái)服務(wù)器。在配置時(shí)，微佩服務(wù)器會(huì)發(fā)1條消息到你配置的服務(wù)器，如果返回的結(jié)果正確，則配置成功（這里可以填寫域名或IP，正式的公眾號(hào)必須用域名，而且這個(gè)域名是ICP備案過的）。由于我們不做消息處理，而且我們只想簡(jiǎn)單的啟用這個(gè)測(cè)試號(hào)，所以這里，我們只寫了1個(gè)簡(jiǎn)單的直接返回結(jié)果的認(rèn)證方法，代碼以下：

@ResponseBody
@RequestMapping(value = "/weixin/message", method = RequestMethod.GET)
public String getWXUserInfo(@RequestParam("signature") String signature, @RequestParam("timestamp") String timestamp, @RequestParam("nonce") String nonce, @RequestParam("echostr") String echostr) {
    //加解密省略。。。直接返回成功
    return echostr;
}

2.2. 網(wǎng)頁服務(wù)認(rèn)證

首先先要配置：

一樣的，這里可以填寫域名或IP，正式的公眾號(hào)必須用域名，而且這個(gè)域名是ICP備案過的
測(cè)試號(hào)信息中的appID還有appSecret是你的app開放認(rèn)證信息的證書。
1般的，開放平臺(tái)都是利用OAuth2.0協(xié)議：

對(duì)微信，流程以下：

第1步：拼接自己的連接：

跳轉(zhuǎn)的鏈接需要接收兩個(gè)參數(shù)，1個(gè)是code，1個(gè)是state；假定我們這里跳轉(zhuǎn)的地址為“/weixin/login”,則地址路徑為：http://127.0.0.1/weixin/login，經(jīng)過url編碼為：http%3A%2F%2F127.0.0.1%2Fweixin%2Flogin

所以，最后的連接為：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0c7b8ab55037d5ca&redirect_uri=http%3A%2F%2F127.0.0.1%2Fweixin%2Flogin&response_type=code&scope=snsapi_base&state=123#wechat_redirect

通過這個(gè)鏈接開始調(diào)試你的公眾號(hào)。

建議用QQ閱讀器，這樣能調(diào)試微信的鏈接。

第2步，編寫微信返回類：

微信的所有返回返回信息都是json情勢(shì)的，如果參數(shù)有誤，返回的結(jié)果都包括errcode和errmsg，所以編寫微信返回基類：

public class BaseReturn implements Serializable {
    private int errcode;
    private String errmsg;

    public int getErrcode() {
        return errcode;
    }

    public void setErrcode(int errcode) {
        this.errcode = errcode;
    }

    public String getErrmsg() {
        return errmsg;
    }

    public void setErrmsg(String errmsg) {
        this.errmsg = errmsg;
    }

    public boolean isSuccessful() {
        return this.errcode == 0;
    }
}

客戶端根據(jù)臨時(shí)令牌code從服務(wù)提供方那里獲得訪問令牌access token的返回的類以下：

public class UserAuthorizationReturn extends BaseReturn {
    private String access_token;//  網(wǎng)頁授權(quán)接口調(diào)用憑證
    private int expires_in;//access_token接口調(diào)用憑證超時(shí)時(shí)間，單位（秒）由于access_token具有較短的有效期，當(dāng)access_token超時(shí)后，可使用refresh_token進(jìn)行刷新，refresh_token具有較長(zhǎng)的有效期（7天、30天、60天、90天），當(dāng)refresh_token失效的后，需要用戶重新授權(quán)。
    private String refresh_token;// 用戶刷新access_token
    private String openid;//    用戶唯1標(biāo)識(shí)，請(qǐng)注意，在未關(guān)注公眾號(hào)時(shí)，用戶訪問公眾號(hào)的網(wǎng)頁，也會(huì)產(chǎn)生1個(gè)用戶和公眾號(hào)唯1的OpenID
    private String scope;//用戶授權(quán)的作用域，使用逗號(hào)（,）分隔

    public String getScope() {
        return scope;
    }

    public void setScope(String scope) {
        this.scope = scope;
    }

    public String getOpenid() {
        return openid;
    }

    public void setOpenid(String openid) {
        this.openid = openid;
    }

    public String getRefresh_token() {
        return refresh_token;
    }

    public void setRefresh_token(String refresh_token) {
        this.refresh_token = refresh_token;
    }

    public int getExpires_in() {
        return expires_in;
    }

    public void setExpires_in(int expires_in) {
        this.expires_in = expires_in;
    }

    public String getAccess_token() {
        return access_token;
    }

    public void setAccess_token(String access_token) {
        this.access_token = access_token;
    }

}

由于年會(huì)只有1個(gè)晚上，我們不用更新用戶信息，所以對(duì)這里的expires_in其實(shí)不做處理。
以后通過accessToken拿取用戶信息返回的類以下：

public class UserInfoReturn extends BaseReturn {
    private String openid;//用戶的唯1標(biāo)識(shí)
    private String nickname;//用戶昵稱
    private int sex;//用戶的性別，值為1時(shí)是男性，值為2時(shí)是女性，值為0時(shí)是未知
    private String province;//用戶個(gè)人資料填寫的省分
    private String city;//  普通用戶個(gè)人資料填寫的城市
    private String country;//國家，如中國為CN
    private String headimgurl;//用戶頭像，最后1個(gè)數(shù)值代表正方形頭像大小（有0、46、64、96、132數(shù)值可選，0代表640*640正方形頭像），用戶沒有頭像時(shí)該項(xiàng)為空。若用戶更換頭像，原有頭像URL將失效。
    private String privilege;//用戶特權(quán)信息，json 數(shù)組，如微信沃卡用戶為（chinaunicom）
    private String unionid;//只有在用戶將公眾號(hào)綁定到微信開放平臺(tái)帳號(hào)后，才會(huì)出現(xiàn)該字段。

    public String getOpenid() {
        return openid;
    }

    public void setOpenid(String openid) {
        this.openid = openid;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public int getSex() {
        return sex;
    }

    public void setSex(int sex) {
        this.sex = sex;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getCountry() {
        return country;
    }

    public void setCountry(String country) {
        this.country = country;
    }

    public String getHeadimgurl() {
        return headimgurl;
    }

    public void setHeadimgurl(String headimgurl) {
        this.headimgurl = headimgurl;
    }

    public String getPrivilege() {
        return privilege;
    }

    public void setPrivilege(String privilege) {
        this.privilege = privilege;
    }

    public String getUnionid() {
        return unionid;
    }

    public void setUnionid(String unionid) {
        this.unionid = unionid;
    }

}

第3步，根據(jù)上面的流程，編寫下面代碼，拿取用戶信息：

@RequestMapping(value = "/weixin/login", method = RequestMethod.GET)
public String getWXUserInfo(@RequestParam("code") String code, HttpServletResponse response) {
    try {
        String s = httpRequest.sendGet("https://api.weixin.qq.com/sns/oauth2/access_token",
                "appid=" + appId + "&secret=" + appSecret + "&code=" + code + "&grant_type=authorization_code");
        UserAuthorizationReturn userAuthorizationReturn = JSON.parseObject(s, UserAuthorizationReturn.class);
        s = httpRequest.sendGet("https://api.weixin.qq.com/sns/userinfo",
                "access_token=" + userAuthorizationReturn.getAccess_token() + "&openid=" + userAuthorizationReturn.getOpenid() + "&lang=zh_CN");
        Integer userId = userService.isSignedByWxInfo(userAuthorizationReturn.getOpenid());
        log.info("微信返回：" + s);
        //以后代碼略
}

2.3. 登陸邏輯

可以參加晚會(huì)的人名單是固定的，除這些人，其他人不能參與晚會(huì)。我們先把所有的人名單導(dǎo)入到數(shù)據(jù)庫中。
我們使用工號(hào)姓名登陸。工號(hào)全是數(shù)字，有人有在工號(hào)前面加0的習(xí)慣，為了都能登錄，我們保存在數(shù)據(jù)庫中的類型是數(shù)字，前端傳輸過來的字符串會(huì)轉(zhuǎn)換成數(shù)字與數(shù)據(jù)庫中的比對(duì)。只有工號(hào)姓名匹配的用戶才能登陸系統(tǒng)。
對(duì)已授權(quán)的微信譽(yù)戶，如果登陸過的話，則不用再登陸1次。直接進(jìn)入年會(huì)主界面。
用戶輸入工號(hào)姓名后，它的用戶信息會(huì)被保存到數(shù)據(jù)庫（包括工號(hào)姓名還有微信譽(yù)戶信息）中。由于微信信息中的openid是唯1的，所以根據(jù)這個(gè)是不是在數(shù)據(jù)庫中存在，判斷是不是是第1次登陸。

完全的代碼：

@RequestMapping(value = "/weixin/login", method = RequestMethod.GET)
    public String getWXUserInfo(@RequestParam("code") String code, HttpServletResponse response) {
        try {
            //根據(jù)code獲得accessToken
            String s = httpRequest.sendGet("https://api.weixin.qq.com/sns/oauth2/access_token",
                    "appid=" + appId + "&secret=" + appSecret + "&code=" + code + "&grant_type=authorization_code");
            UserAuthorizationReturn userAuthorizationReturn = JSON.parseObject(s, UserAuthorizationReturn.class);
            s = httpRequest.sendGet("https://api.weixin.qq.com/sns/userinfo",
                    "access_token=" + userAuthorizationReturn.getAccess_token() + "&openid=" + userAuthorizationReturn.getOpenid() + "&lang=zh_CN");
            Integer userId = userService.isSignedByWxInfo(userAuthorizationReturn.getOpenid());
            log.info("微信返回：" + s);
            if (userId != null) {            //已簽到
                CookiesUtil.addCookie(response, "userId", String.valueOf(userId), 86400);
                return "redirect:/frontend/main.html";
            } else {                  //未簽到
                CookiesUtil.addCookie(response, "userJson", URLEncoder.encode(s, "UTF⑻"), 86400);
                return "redirect:/frontend/login.html";
            }
        } catch (Exception e) {
            log.warn(ExceptionUtils.getStackTrace(e));
        }
        return "redirect:/frontend/404.html";
    }

這里我們偷懶了，并沒有嚴(yán)格的會(huì)話和登錄權(quán)限控制，只是做了簡(jiǎn)單的cookie。面對(duì)都是程序員的晚會(huì)，不應(yīng)當(dāng)做這么簡(jiǎn)單的登陸控制。

2.4. 簽到上墻Websocket

在用戶第1次成功登陸也就是簽到成功時(shí)，服務(wù)器需要將這個(gè)簽到消息推送給客戶端。這類單項(xiàng)推送的技術(shù)，有很多可以選擇：

1. HTTP輪詢和長(zhǎng)輪詢：最容易實(shí)現(xiàn)，但是比較繁瑣而且耗費(fèi)服務(wù)器資源. 簡(jiǎn)易輪詢由于其本身的缺點(diǎn)，其實(shí)不推薦使用。Comet 技術(shù)其實(shí)不是 HTML 5 標(biāo)準(zhǔn)的1部份，從兼容標(biāo)準(zhǔn)的角度動(dòng)身，也不推薦使用。
2. Websocket：全雙工協(xié)議，可以用。市面上所有閱讀器都支持，對(duì)Spring有很好的集成，但是是從Spring 4.0開始的，我們用的框架基于Spring 3.X，來不及升級(jí)。但是Tomcat 7.X有現(xiàn)成的websocket實(shí)現(xiàn)。WebSocket 規(guī)范和服務(wù)器推送技術(shù)都是 HTML 5 標(biāo)準(zhǔn)的組成部份，在主流閱讀器上都提供了原生的支持，是推薦使用的。
3. SSE服務(wù)器發(fā)送事件：對(duì)簡(jiǎn)單的服務(wù)器數(shù)據(jù)推送的場(chǎng)景，使用服務(wù)器推送（SSE技術(shù)）事件就足夠了。這個(gè)是最合適的，惋惜當(dāng)時(shí)我不知道這個(gè)技術(shù)。可以參考：http://www.cnblogs.com/imstudy/p/5682555.html.

服務(wù)器通過Websocket通道，將人員簽到的信息推送至簽到墻頁面，這里我應(yīng)用的是最簡(jiǎn)單的tomcat 7的websocket實(shí)現(xiàn)。