2、微信小程式之彈幕的實現（無後臺）

對彈幕功能主要利用環信來實現的，讀者也許對環信這個東西很陌生，請先自行瞭解這環信再來看這文章。環信開發文檔：http://docs.easemob.com/im/400webimintegration/10webimintro 請大家看文檔看WebIM這個模塊，環信官網也提供了小程式的demo，建 ...

對彈幕功能主要利用環信來實現的，讀者也許對環信這個東西很陌生，請先自行瞭解這環信再來看這文章。

環信開發文檔：http://docs.easemob.com/im/400webimintegration/10webimintro

請大家看文檔看WebIM這個模塊，環信官網也提供了小程式的demo，建議讀者先自行下載個demo。，瞭解環信的基礎功能。

環信小程式demo下載地址：https://github.com/easemob/webim-weixin-xcx

彈幕功能主要是利用了聊天室來實現的。為什麼要選擇聊天室呢？因為聊天室里上線便會自動收到聊天室的信息，下線不會去接收聊天室裡面的信息，同時也會自動退出聊天室。環信聊天室最多可以支持5000人同時線上。

那首先要創建一個聊天，關於怎麼註冊環信的帳號、創建應用就不提了，筆者是個很low很low的大四狗，同時也很懶。

1、聊天室的創建：

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>
    <title>IM-DEMO</title>
    
    <!--引入jQuery腳本-->
    <script type='text/javascript' src='jquery-2.1.1.min.js'></script>
    
    <!--環信引入相關腳本-->
    <script type='text/javascript' src='webim.config.js'></script>
    <script type='text/javascript' src='strophe.js'></script>
    <script type='text/javascript' src='websdk-1.1.2.js'></script>
    <script type="text/javascript"  src='websdk.shim.js'></script>




</head>
<body>
    <input type="text" id="username" placeholder="帳號"/>
    <input type="text" id="password" placeholder="密碼"/>
    <input type="button" onclick="login()" value="登錄" >    <br>
    <input type="button" onclick="addGroup()" value="加群" >    <br>
    <input type="text" id="msg" placeholder="請發送消息" >    <br>
    <input type="button" id="send" value="發送" onclick="sendRoomText()">    <br>
    <input type="button" value="獲取聊天室信息" onclick="queryRooms()">    <br>
    <input type="button" value="創建聊天室" onclick="createRoom()">    <br>
    <input type="button" value="獲得token" onclick="getIMToken()">    <br>
    
</body>
<script>
        var conn = new WebIM.connection({
            https: WebIM.config.https,
            url: WebIM.config.xmppURL,
            isAutoLogin: WebIM.config.isAutoLogin,
            isMultiLoginSessions: WebIM.config.isMultiLoginSessions
        });

        conn.listen({
    onOpened: function ( message ) {          //連接成功回調
        // 如果isAutoLogin設置為false，那麼必須手動設置上線，否則無法收消息
        // 手動上線指的是調用conn.setPresence(); 如果conn初始化時已將isAutoLogin設置為true
        // 則無需調用conn.setPresence();             
    },  
    onClosed: function ( message ) {},         //連接關閉回調
    onTextMessage: function ( message ) {alert(message);},    //收到文本消息
    onEmojiMessage: function ( message ) {},   //收到表情消息
    onPictureMessage: function ( message ) {}, //收到圖片消息
    onCmdMessage: function ( message ) {},     //收到命令消息
    onAudioMessage: function ( message ) {},   //收到音頻消息
    onLocationMessage: function ( message ) {},//收到位置消息
    onFileMessage: function ( message ) {},    //收到文件消息
    onVideoMessage: function (message) {
        var node = document.getElementById('privateVideo');
        var option = {
            url: message.url,
            headers: {
              'Accept': 'audio/mp4'
            },
            onFileDownloadComplete: function (response) {
                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
                node.src = objectURL;
            },
            onFileDownloadError: function () {
                console.log('File down load error.')
            }
        };
        WebIM.utils.download.call(conn, option);
    },   //收到視頻消息
    onPresence: function ( message ) {},       //收到聯繫人訂閱請求、處理群組、聊天室被踢解散等消息
    onRoster: function ( message ) {},         //處理好友申請
    onInviteMessage: function ( message ) {alert(message);},  //處理群組邀請
    onOnline: function () {},                  //本機網路連接成功
    onOffline: function () {},                 //本機網路掉線
    onError: function ( message ) {},          //失敗回調
    onBlacklistUpdate: function (list) {       //黑名單變動
        // 查詢黑名單，將好友拉黑，將好友從黑名單移除都會回調這個函數，list則是黑名單現有的所有好友信息
        console.log(list);
    }
});


conn.listen({
  onPresence: function ( message ) {
    handlePresence(message);
  }
});
 
 
var handlePresence = function ( e ) {
    
    if(e.type == 'joinChatRoomSuccess'){
        alert("加入成功");
    }
    if(e.type == 'deleteGroupChat'){
        alert("聊天室被刪除");
    }
    if(e.type == 'joinChatRoomFailed'){
        alert("加入失敗");
    }
};
    
</script>

<script>
    
    //登錄
    function login(){
    
        var user = $("#username").val();
        var pwd = $("#password").val();
        
        var options = { 
            apiUrl: WebIM.config.apiURL,
            user: user,
            pwd: pwd,
            appKey: WebIM.config.appkey
        };
        conn.open(options);
        alert("登錄成功")
        queryRooms();
    }

    function addGroup(){
        var username =$('#username').val()
        var option = {
            list: [username],
            roomId: '1484378873553'
            };
        conn.addGroupMembers(option);
        alert('加入成功');
    }

    
var token = "";
    
    //獲取環信token
function getIMToken()
{
    //三個參數缺一不可
    var formdata = {
        "grant_type":"client_credentials",
        "client_id":"YXA6mdMuYMSEEeaJ0UPWrFAEEA",
          "client_secret":"YXA6JFc9RMgIf_ONr15XvknutQm8nQE"
      }
    
    
      $.ajax({
          type:"post",
          headers:{"Content-Type":"application/json"},
          url:"http://a1.easemob.com/1165161218178005/test/token",
          data:JSON.stringify(formdata),
          dataType:"json",
          success:function(data){
            token=data.access_token;
            alert(token);
          }
      });    
}
    
    
    //建立聊天室
    function createRoom(){
    
    var option = {
        "name":"testRoom", //聊天室名稱，此屬性為必須的
        "description":"server create chatroom", //聊天室描述，此屬性為必須的
        "maxusers":500, //聊天室成員最大數（包括群主），值為數值類型，預設值200，最大值5000，此屬性為可選的
        "owner":"c11", //聊天室的管理員，此屬性為必須的
        //"members":["jma2","jma3"] //聊天室成員，此屬性為可選的，但是如果加了此項，數組元素至少一個（註：群主jma1不需要寫入到members裡面）
        }
        
        getIMToken();

        alert(token);
        $.ajax({
            type:"post",
            headers:{"Authorization":"Bearer "+token},
            url:"http://a1.easemob.com/1165161218178005/test/chatrooms",
            dataType:"json",
            data:JSON.stringify(option),
            success:function(data){
                console.log(data);
            }
      })
    }


    
// 列出所有聊天室，支持分頁查詢
function queryRooms(){
    var option = {
        apiUrl: 'https://a1.easemob.com',
        pagenum: 1,                                 // 頁數
        pagesize: 20,                               // 每頁個數
        success: function (list) {
            console.log(list);
                                list=JSON.stringify(list);    //        解析json格式數據變成js
                    alert('聊天室列表：'+list);
        },
        error: function () {
            console.log('List chat room error');
            alert("錯誤");
        }
    };
    conn.getChatRooms(option);
}


function sendRoomText(){
var id = conn.getUniqueId();         // 生成本地消息id
    var msg = new WebIM.message('txt', id); // 創建文本消息
    var content = $("#msg").val();
    var option = {
        msg: content,          // 消息內容
        to: '277817528464441880',               // 接收消息對象(聊天室id)
        roomType: true,
        chatType: 'chatRoom',
        success: function () {
            console.log('send room text success');
        },
        fail: function () {
            console.log('send room text failed');
        }
    };
    msg.set(option);
    msg.setGroup('groupchat');
    conn.send(msg.body);
}
</script>
</html>

這是我以前學習時寫的demo，那時候獲取token花的時間比較多。所以在這裡希望大家不要走彎路。

2、接下來就是怎麼改代碼了，將官方提供的小程式demo，轉移到自己的項目上。我還是附上自己搬磚的成果吧。

鏈接：http://pan.baidu.com/s/1qYFBWsc 密碼：mnp8

遇到還沒解決的問題:

1、在小程式里環信加入聊天室失敗。

這是一個小白的隨筆，小白的學習之路。