首页 > 代码库 > 2、微信小程序之弹幕的实现(无后台)

2、微信小程序之弹幕的实现(无后台)

对弹幕功能主要利用环信来实现的,读者也许对环信这个东西很陌生,请先自行了解这环信再来看这文章。

环信开发文档: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 () {},                 //本机网络掉线
    one rror: 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、在小程序里环信加入聊天室失败。

 

这是一个小白的随笔,小白的学习之路。

 

2、微信小程序之弹幕的实现(无后台)