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

2023-11-16 22:03:58

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

环信开发文档：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、在小程序里环信加入聊天室失败。

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

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

码农公寓

相关文章