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

环信开发文档：http://docs.easemob.com/im/400webimintegration/10webimintro

请大家看文档看WebIM这个模块，环信官网也提供了小程序的demo，建议读者先自行下载个demo。，了解环信的基础功能。

环信小程序demo下载地址：https://github.com/easemob/webim-weixin-xcx

弹幕功能主要是利用了聊天室来实现的。为什么要选择聊天室呢？因为聊天室里上线便会自动收到聊天室的信息，下线不会去接收聊天室里面的信息，同时也会自动退出聊天室。环信聊天室最多可以支持5000人同时在线。

那首先要创建一个聊天，关于怎么注册环信的帐号、创建应用就不提了，笔者是个很low很low的大四狗，同时也很懒。

1、聊天室的创建：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/>
  7.     <title>IM-DEMO</title>
  8.  
  9.     <!--引入jQuery脚本-->
  10.     <script type='text/javascript' src='jquery-2.1.1.min.js'></script>
  11.  
  12.     <!--环信引入相关脚本-->
  13.     <script type='text/javascript' src='webim.config.js'></script>
  14.     <script type='text/javascript' src='strophe.js'></script>
  15.     <script type='text/javascript' src='websdk-1.1.2.js'></script>
  16.     <script type="text/javascript"  src='websdk.shim.js'></script>
  17.  
  18. </head>
  19. <body>
  20.     <input type="text" id="username" placeholder="帐号"/>
  21.     <input type="text" id="password" placeholder="密码"/>
  22.     <input type="button" onclick="login()" value="登录" >    <br>
  23.     <input type="button" onclick="addGroup()" value="加群" >    <br>
  24.     <input type="text" id="msg" placeholder="请发送消息" >    <br>
  25.     <input type="button" id="send" value="发送" onclick="sendRoomText()">    <br>
  26.     <input type="button" value="获取聊天室信息" onclick="queryRooms()">    <br>
  27.     <input type="button" value="创建聊天室" onclick="createRoom()">    <br>
  28.     <input type="button" value="获得token" onclick="getIMToken()">    <br>
  29.  
  30. </body>
  31. <script>
  32.         var conn = new WebIM.connection({
  33.             https: WebIM.config.https,
  34.             url: WebIM.config.xmppURL,
  35.             isAutoLogin: WebIM.config.isAutoLogin,
  36.             isMultiLoginSessions: WebIM.config.isMultiLoginSessions
  37.         });
  38.  
  39.         conn.listen({
  40.     onOpened: function ( message ) {          //连接成功回调
  41.         // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
  42.         // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
  43.         // 则无需调用conn.setPresence();
  44.     },
  45.     onClosed: function ( message ) {},         //连接关闭回调
  46.     onTextMessage: function ( message ) {alert(message);},    //收到文本消息
  47.     onEmojiMessage: function ( message ) {},   //收到表情消息
  48.     onPictureMessage: function ( message ) {}, //收到图片消息
  49.     onCmdMessage: function ( message ) {},     //收到命令消息
  50.     onAudioMessage: function ( message ) {},   //收到音频消息
  51.     onLocationMessage: function ( message ) {},//收到位置消息
  52.     onFileMessage: function ( message ) {},    //收到文件消息
  53.     onVideoMessage: function (message) {
  54.         var node = document.getElementById('privateVideo');
  55.         var option = {
  56.             url: message.url,
  57.             headers: {
  58.               'Accept': 'audio/mp4'
  59.             },
  60.             onFileDownloadComplete: function (response) {
  61.                 var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
  62.                 node.src = objectURL;
  63.             },
  64.             onFileDownloadError: function () {
  65.                 console.log('File down load error.')
  66.             }
  67.         };
  68.         WebIM.utils.download.call(conn, option);
  69.     },   //收到视频消息
  70.     onPresence: function ( message ) {},       //收到联系人订阅请求、处理群组、聊天室被踢解散等消息
  71.     onRoster: function ( message ) {},         //处理好友申请
  72.     onInviteMessage: function ( message ) {alert(message);},  //处理群组邀请
  73.     onOnline: function () {},                  //本机网络连接成功
  74.     onOffline: function () {},                 //本机网络掉线
  75.     onError: function ( message ) {},          //失败回调
  76.     onBlacklistUpdate: function (list) {       //黑名单变动
  77.         // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
  78.         console.log(list);
  79.     }
  80. });
  81.  
  82. conn.listen({
  83.   onPresence: function ( message ) {
  84.     handlePresence(message);
  85.   }
  86. });
  87.  
  88. var handlePresence = function ( e ) {
  89.  
  90.     if(e.type == 'joinChatRoomSuccess'){
  91.         alert("加入成功");
  92.     }
  93.     if(e.type == 'deleteGroupChat'){
  94.         alert("聊天室被删除");
  95.     }
  96.     if(e.type == 'joinChatRoomFailed'){
  97.         alert("加入失败");
  98.     }
  99. };
  100.  
  101. </script>
  102.  
  103. <script>
  104.  
  105.     //登录
  106.     function login(){
  107.  
  108.         var user = $("#username").val();
  109.         var pwd = $("#password").val();
  110.  
  111.         var options = {
  112.             apiUrl: WebIM.config.apiURL,
  113.             user: user,
  114.             pwd: pwd,
  115.             appKey: WebIM.config.appkey
  116.         };
  117.         conn.open(options);
  118.         alert("登录成功")
  119.         queryRooms();
  120.     }
  121.  
  122.     function addGroup(){
  123.         var username =$('#username').val()
  124.         var option = {
  125.             list: [username],
  126.             roomId: '1484378873553'
  127.             };
  128.         conn.addGroupMembers(option);
  129.         alert('加入成功');
  130.     }
  131.  
  132. var token = "";
  133.  
  134.     //获取环信token
  135. function getIMToken()
  136. {
  137.     //三个参数缺一不可
  138.     var formdata = {
  139.         "grant_type":"client_credentials",
  140.         "client_id":"YXA6mdMuYMSEEeaJ0UPWrFAEEA",
  141.           "client_secret":"YXA6JFc9RMgIf_ONr15XvknutQm8nQE"
  142.       }
  143.  
  144.       $.ajax({
  145.           type:"post",
  146.           headers:{"Content-Type":"application/json"},
  147.           url:"http://a1.easemob.com/1165161218178005/test/token",
  148.           data:JSON.stringify(formdata),
  149.           dataType:"json",
  150.           success:function(data){
  151.             token=data.access_token;
  152.             alert(token);
  153.           }
  154.       });
  155. }
  156.  
  157.     //建立聊天室
  158.     function createRoom(){
  159.  
  160.     var option = {
  161.         "name":"testRoom", //聊天室名称，此属性为必须的
  162.         "description":"server create chatroom", //聊天室描述，此属性为必须的
  163.         "maxusers":500, //聊天室成员最大数（包括群主），值为数值类型，默认值200，最大值5000，此属性为可选的
  164.         "owner":"c11", //聊天室的管理员，此属性为必须的
  165.         //"members":["jma2","jma3"] //聊天室成员，此属性为可选的，但是如果加了此项，数组元素至少一个（注：群主jma1不需要写入到members里面）
  166.         }
  167.  
  168.         getIMToken();
  169.  
  170.         alert(token);
  171.         $.ajax({
  172.             type:"post",
  173.             headers:{"Authorization":"Bearer "+token},
  174.             url:"http://a1.easemob.com/1165161218178005/test/chatrooms",
  175.             dataType:"json",
  176.             data:JSON.stringify(option),
  177.             success:function(data){
  178.                 console.log(data);
  179.             }
  180.       })
  181.     }
  182.  
  183. // 列出所有聊天室，支持分页查询
  184. function queryRooms(){
  185.     var option = {
  186.         apiUrl: 'https://a1.easemob.com',
  187.         pagenum: 1,                                 // 页数
  188.         pagesize: 20,                               // 每页个数
  189.         success: function (list) {
  190.             console.log(list);
  191.                                 list=JSON.stringify(list);    //        解析json格式数据变成js
  192.                     alert('聊天室列表：'+list);
  193.         },
  194.         error: function () {
  195.             console.log('List chat room error');
  196.             alert("错误");
  197.         }
  198.     };
  199.     conn.getChatRooms(option);
  200. }
  201.  
  202. function sendRoomText(){
  203. var id = conn.getUniqueId();         // 生成本地消息id
  204.     var msg = new WebIM.message('txt', id); // 创建文本消息
  205.     var content = $("#msg").val();
  206.     var option = {
  207.         msg: content,          // 消息内容
  208.         to: '277817528464441880',               // 接收消息对象(聊天室id)
  209.         roomType: true,
  210.         chatType: 'chatRoom',
  211.         success: function () {
  212.             console.log('send room text success');
  213.         },
  214.         fail: function () {
  215.             console.log('send room text failed');
  216.         }
  217.     };
  218.     msg.set(option);
  219.     msg.setGroup('groupchat');
  220.     conn.send(msg.body);
  221. }
  222. </script>
  223. </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. (转)wxWidgets 2.9.2svn（3.x）最小体积编译方法

    官方论坛.网上记录的wxWidgets编译方法,会导致编译后的程序库非常大,原因在于对编译的方法选择不当.下面简单总结一下如何编译最新的SVN代码.下载最新源码(每日构建):http://biolpc ...

  2. 在VMware上安装ubuntu,并且SecureCRT远程连接

     工具: VMware:VMware-workstation-full_12.5.5.17738.exe Ubuntu镜像:ubuntu-16.04-server-amd64.iso 远程连接工具-- ...

  3. 多重bash登入的history写入问题

    问题:如果一个用户同时开好几个 bash 接口, 这时~/.bash_history中会写入哪个bash的历史命令记录? 答:所有的bash 都有自己的 HISTSIZE 笔记录在内存中,因为等到注销 ...

  4. MySQL授权命令grant的使用方法

    本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删 ...

  5. 移动端车牌识别、行驶证识别OCR为共享汽车APP增添技术色彩

    本文主题:移动端车牌识别.行驶证识别OCR为共享汽车APP增添技术色彩 本文关键词:车牌识别,证件识别,移动端车牌识别,行驶证识别,手机车牌识别,驾驶证识别 近两年,随着共享单车以及共享电车的兴起,有 ...

  6. 关于MATLAB处理大数据坐标文件2017527

    第一次提交数据: 今天用了8个特征,加上的这一个特征是 从3000条测试数据中测试失败的数据总结出来的树的数目为50再次使用3000条测试数据测试结果-- 结果不错: 99%但是运行官网数据结果分数- ...

  7. jquery删除表格行

    $(".mingxirmspan").click(function(){ $(this).closest("tr").remove(); })

  8. for循环操作数组

    if(!empty($data)){ $arr_length=count($data); //数组的步长 $array_keys_list=array_values($data); //数组的键值 f ...

  9. mysql 查询缓存配置和查看

    Mysql 查询缓存 查询缓存的作用就是当查询接收到一个和之前同样的查询,服务器将会从查询缓存种检索结果,而不是再次分析和执行上次的查询.这样就大大提高了性能,节省时间. 1.配置查询缓存 修改配置文 ...

  10. 【Android Developers Training】 92. 序言：使用同步适配器传输数据

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