對彈幕功能主要利用環信來實現的，讀者也許對環信這個東西很陌生，請先自行了解這環信再來看這文章。
環信開發文檔：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、在小程序里環信加入聊天室失敗。
這是一個小白的隨筆，小白的學習之路。