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 () {}, //本机网络掉线
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、微信小程序之弹幕的实现（无后台）的更多相关文章
- 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据， 以及 post 请求返回 404 但后台能收到数据
1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...
- 微信小程序-视频弹幕的项目
1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 一般微信小程序需要配置.wxml.wxss.js.json文件,所有接下来也是要配置这几个文件,请看下图: 第一: index.wxml < ...
- 微信小程序wx.request请求用POST后台得不到传递数据
微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({ url: 'url' ...
- 手持式停车收费管理系统全套案例，支持车牌识别，包含了android版app，微信小程序查询，响应式管理后台，云端大数据存储
先展示几个app效果图片吧,使用起来非常方便,关联了机器的快捷键操作,操作速度提高了不少,摄像头车牌自动识别,车牌识别无网络情况下离线也可以使用 再来一张后台截图,停车场信息完整显示,今日数据实时 ...
- 微信小程序：使用wx.request()请求后台接收不到参数
问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...
- 微信小程序-bug-调用wx.login()无响应的原因和解决方案
想必,最近有些小程序开发者,在调用wx.login()的时候,在部分IOS上无响应的情况: 补充一点:在测试模式,调试模式,都是OK的,一上正式环境就GG了,百思不得其解啊! 响应结果如下: 在suc ...
- 在Mac Os(苹果)上用手机抓包软件Charles抓取微信小程序中的高清无水印视频
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_118 手机抓包是一名测试工程师常备的技能,比如我想查看一个接口请求的参数.返回值,还有移动设备上的http请求.https请求,这 ...
- 微信小程序开发常见问题分析
距离微信小程序内测版发布已经有十几天的时间了,网上对微信小程序的讨论也异常火爆,从发布到现在微信小程序一直占领着各种技术论坛的头条,当然各种平台也对微信小程序有新闻报道,毕竟腾讯在国内影响力还是很大的 ...
- Spring+微信小程序 卡券打通
近期公司项目需要使用到微信卡券模块,主要做的是在小程序打通微信卡券,实现小程序领取卡券的功能效果. 简单说下涉及的东西: Springboot—使用springboot做后端接口,非常便捷 并且根本是 ...
随机推荐
- javascript痛点之二作用域链
1.执行环境(执行上下文) 先看段代码 var a = 10; var b = 20; function cc(){ var c = 30; alert("b="+b); } cc ...
- cpp(第十一章)
1. std::istream & operator>>(std::istream &is,complex_c &t) { std::cout<<&qu ...
- python基础操作_字符串操作_列表操作list
#字符串可以通过下表取值,如下程序 names='java python' print(names[0],names[5]) #使用for循环轮询所有name值 ''' for name in nam ...
- Nmap绕过防火墙&脚本的使用
Nmap是用于端口扫描,服务检测,甚至是漏洞扫描等多种功能的强大工具.Nmap从入门到高级覆盖了许多基础的概念和命令,在这篇文章的第二部分,我将提及Nmap一些高级的技术. 防火墙和入侵检测系统(ID ...
- 定期清空log文件
# auto-del-log.sh #!/bin/shfor i in `find . -name "*.out" -o -name "*.log"`do c ...
- CSS3学习系列之选择器（三）
E:enabled伪类选择器和E:disabled伪类选择器 E:enabled伪类选择器用来指定元素处于可用状态的样式. E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个 ...
- ztree学习笔记（一）
在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一 ...
- Python 任务队列 Celery
一. celery 简介 Celery 是一个专注于实时处理和任务调度的分布式任务队列, 同时提供操作和维护分布式系统所需的工具.. 所谓任务就是消息, 消息中的有效载荷中包含要执行任务需要的全部数据 ...
- Ubuntu16.04更换漂亮绚丽flatabulous主题
作者:tongqingliu 转载请注明出处: Ubuntu16.04更换漂亮绚丽flatabulous主题 更新 sudo apt-get update sudo apt-get upgrade 安 ...
- 伞兵(Paratroopers)
伞兵(Paratroopers) 时间限制: 1 Sec 内存限制: 128 MB 题目描述 公元 2500 年,地球和火星之间爆发了一场战争.最近,地球军队指挥官获悉火星入侵者将派一些伞兵来摧毁地 ...