教你接入公衆號發博客彈幕

不知道你有沒有這麼想過，在微信我的公衆號愈來愈廣泛，自媒體愈來愈流行的時候，是否想過申請一個本身的微信公衆號折騰一下呢？在朋友圈裏看到愈來愈多的小夥伴都在轉發本身微信公衆號裏的文章，你會想我要搞個微信公衆號該折騰點什麼呢？寫文章太沒新意，作內容你沒素材。好了，那麼本文就教你如何正確的折騰微信我的公衆號。

準備工做

• 首先，得有一個帶有後端動態語言的我的博客

• 其次，得有一個微信我的公衆號

• 最後，得會編程(好比，php、javascript等)

配置微信公衆號

登陸微信公衆平臺，進入開發->基本配置頁面，啓用服務器配置功能，以下圖：

具體接入並驗證你的服務器地址請參考公衆號開發文檔，搞定這一步後，咱們就能夠開始寫服務端代碼(以php爲例)
服務端主要用來接受微信post過來的數據並解析處理，如下是公衆號消息接受服務端代碼片斷：

// 微信消息接收入口
function onHttpPostRequest($mock){
    $wxMsgBody = $mock;
    if(empty($wxMsgBody)){
        $wxMsgBody = file_get_contents("php://input");
    }

    $this->wxMsgBody = simplexml_load_string($wxMsgBody, 'SimpleXMLElement', LIBXML_NOCDATA);
    $this->wxMsgType = strtoupper($this->wxMsgBody->MsgType);

    $this->comet();
}

// 將接受到的消息序列化後寫入文件，用來觸發前端的comet
public function comet() {
    $cometfile = WWW_PATH . 'wechat.comet';
    if(!file_exists($cometfile)) {
        file_put_contents($cometfile, '');
    }
    $filemtime = filemtime($cometfile);
    $timing = time() - $filemtime;
    $wxMsgBody = (array)$this->wxMsgBody;
    if($timing > 1) {
        file_put_contents($cometfile, serialize($wxMsgBody));
    } else {
        file_put_contents($cometfile, serialize($wxMsgBody) . PHP_EOL, FILE_APPEND);
    }
}

以上完整代碼地址：indexAction.class.php

comet?

comet技術是N年前出來的一種基於HTTP長鏈接的「服務器推」技術，此處主要用來即時在博客頁面上顯示彈幕消息，它的核心代碼分服務端和客戶端主要以下：

<?php
// 服務端代碼
ini_set("display_errors", "On");
error_reporting(E_ALL | E_STRICT);

$cometfile  = 'wechat.comet';

set_time_limit(0);
$lastmtime = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
$msgid = isset($_GET['msgid']) ? $_GET['msgid'] : 0;
$callback = isset($_GET['callback']) ? $_GET['callback'] : 0;

//取得文件最後修改時間
$filemtime = filemtime($cometfile);
while ($filemtime <= $lastmtime)  {
//有釋放CPU佔用率的做用
    usleep(10000);
    //清除文件緩存信息
    clearstatcache();
    $filemtime = filemtime($cometfile); 
} 
$files = array_reverse(file($cometfile)); 
$result = array(); 
foreach ($files  as $key => $value) {
    $msg = unserialize($value);
    if($msg['MsgId'] == $msgid) {
        break;
    }
    array_push($result, $msg);
}
$response = array();
$response['data']      = $result;
$response['timestamp'] = $filemtime;
echo $callback . '(' . json_encode($response) . ')';
ob_flush();
flush();

如下代碼主要是在客戶端與服務端創建http長鏈接

// 客戶端代碼 (javascript)
function Comet(url,cbk){
    var url          = url;
    var cbk          = cbk;
    var timestamp    = 0;
    var msgid = 0;
    var noerror      = true

    var main         = function(){
        $.ajax({
            type:'GET',
            url: url,
            dataType : 'jsonp',
            timeout: 5000,
            data: {
                timestamp: timestamp,
                msgid: msgid
            }
        }).success(function(res){
            var isFrist = timestamp;
            timestamp = res.timestamp;
            if(res.data[0]) {
                   msgid = res.data[0]['MsgId'];
            }

            noerror = true;
            if(isFrist == 0)return false;
            if(cbk)cbk(res);
        }).complete(function() {
            if (!noerror){
                setTimeout(main, 10); 
            }else{
                setTimeout(main, 10); 
            }
            noerror = false;
        });
    };

    return main();
}

Comet('http://dev.sobird.me/_wechat.php', function(res) {
    var data = res.data;
    var danm={
       info: '', //文字 
       href: '', //連接 
       close: false, //顯示關閉按鈕 
       speed: 6, //延遲,單位秒,默認6 
       color: randRgb(), //顏色,默認白色 
       old_ie_color: randRgb(), //ie低版兼容色,不能與網頁背景相同,默認黑色 
     }
    if(data.length > 0) {
        $.each(data, function(index, item) {
        var msgType = item.MsgType

        switch (msgType) {
            case 'text' :
            var text = item.Content;
            danm.info = text;

                $('body').barrager(danm);
            break;
            case 'image' :
            var img = 'http://dev.sobird.me/wechat/pic?src=' + item.PicUrl;
            danm.img = img;

            disImage(img, function() {
                    $('body').barrager(danm);
            });
            break;
            default:
        }
    });
    }
});

完整代碼：Jaring.js 文件最底部

彈幕？

在博客上實現彈幕效果相對來說就簡單了，在Github上有不少的開源庫(基於jQuery)，我使用的是這個庫: jquery.barrager.js，在博客中引入這個庫你就能夠像下面這樣使用了

// 把官方示例挪過來~~
var item={
    img:'static/heisenberg.png', //圖片
    info:'彈幕文字信息', //文字
    href:'http://www.yaseng.org', //連接
    close:true, //顯示關閉按鈕
    speed:8, //延遲,單位秒,默認8
    bottom:70, //距離底部高度,單位px,默認隨機
    color:'#fff', //顏色,默認白色
    old_ie_color:'#000000', //ie低版兼容色,不能與網頁背景相同,默認黑色
}
$('body').barrager(item);

基於jQuery的彈幕效果，代碼簡短，調整好合適的CSS樣式

體驗效果

不妨如今就掃描下面二維碼，關注個人公衆號後，隨便發一點文字或圖片，而後到個人我的博客看看