对弹幕功能主要利用环信来实现的，读者也许对环信这个东西很陌生，请先自行了解这环信再来看这文章。
环信开发文档：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、在小程序里环信加入聊天室失败。
这是一个小白的随笔，小白的学习之路。