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

环信开发文档：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、微信小程序之弹幕的实现（无后台）的更多相关文章

  1. 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据， 以及 post 请求返回 404 但后台能收到数据

    1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...

  2. 微信小程序-视频弹幕的项目

    1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 一般微信小程序需要配置.wxml.wxss.js.json文件,所有接下来也是要配置这几个文件,请看下图: 第一:  index.wxml < ...

  3. 微信小程序wx.request请求用POST后台得不到传递数据

    微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({              url: 'url' ...

  4. 手持式停车收费管理系统全套案例，支持车牌识别，包含了android版app，微信小程序查询，响应式管理后台，云端大数据存储

    先展示几个app效果图片吧,使用起来非常方便,关联了机器的快捷键操作,操作速度提高了不少,摄像头车牌自动识别,车牌识别无网络情况下离线也可以使用   再来一张后台截图,停车场信息完整显示,今日数据实时 ...

  5. 微信小程序：使用wx.request()请求后台接收不到参数

    问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...

  6. 微信小程序-bug-调用wx.login()无响应的原因和解决方案

    想必,最近有些小程序开发者,在调用wx.login()的时候,在部分IOS上无响应的情况: 补充一点:在测试模式,调试模式,都是OK的,一上正式环境就GG了,百思不得其解啊! 响应结果如下: 在suc ...

  7. 在Mac Os(苹果)上用手机抓包软件Charles抓取微信小程序中的高清无水印视频

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_118 手机抓包是一名测试工程师常备的技能,比如我想查看一个接口请求的参数.返回值,还有移动设备上的http请求.https请求,这 ...

  8. 微信小程序开发常见问题分析

    距离微信小程序内测版发布已经有十几天的时间了,网上对微信小程序的讨论也异常火爆,从发布到现在微信小程序一直占领着各种技术论坛的头条,当然各种平台也对微信小程序有新闻报道,毕竟腾讯在国内影响力还是很大的 ...

  9. Spring+微信小程序 卡券打通

    近期公司项目需要使用到微信卡券模块,主要做的是在小程序打通微信卡券,实现小程序领取卡券的功能效果. 简单说下涉及的东西: Springboot—使用springboot做后端接口,非常便捷 并且根本是 ...

随机推荐

  1. 转自52 梦回凉亭的她 Java常见问题，面试题

    收集整理分享# 相关概念## 面向对象的三个特征封装,继承,多态.这个应该是人人皆知.有时候也会加上抽象.## 多态的好处允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不 ...

  2. 向EXECL文件中导入数据的同时插入图片

    因为项目需要在导出数据到EXECL文档的同时还需要导出图片进去,在处理是遇到的一些问题,在此记录一下. 首先代码写好之后放测试服务器上去执行的时候报错了,报检索 COM 类工厂中 CLSID 为 {0 ...

  3. 16.3Sum Closet

    思路: 暴力,复杂度为 \(O(n^3)\),超时 class Solution { public: int threeSumClosest(vector<int>& nums, ...

  4. 用PHP和Ajax进行前后台数据交互——以用户登录为例

    很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...

  5. JavaScript事件与例子

    事件,就是预先设置好的一段代码,等到用户触发的时候执行. 一:常见的事件: 1.关于鼠标的事件 onclick 鼠标单击触发 ondblclick 鼠标双击触发 onmouseover 鼠标移上触发 ...

  6. Codeforces Round #419 (Div. 2)

    1.题目A:Karen and Morning 题意: 给出hh:mm格式的时间,问至少经过多少分钟后,该时刻为回文字符串? 思路: 简单模拟,从当前时刻开始,如果hh的回文rh等于mm则停止累计.否 ...

  7. 谈谈java中遍历Map的几种方法

    java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下具体的用法以及各自的优缺点 先初始化一个map public ...

  8. Latex: 插入数学公式

    write equations align equations to left To only align one equation, you can \begin{flalign} &\te ...

  9. WebSocket 结合 Nginx 实现域名及 WSS 协议访问

    简单了解一下 WebSocket 现在,很多网站为了实现推送技术,所用的技术都是轮询.轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器 ...

  10. 【Android Developers Training】 99. 获取联系人详细信息

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...