Web Getting started
手动登录
快速集成网易云信登录,只需要操作以下4步就可以完成:
1. 下载SDK并引入。
2. 创建登录页面传入登录参数
3. 接收登录数据创建NIM示实例
4. 连接结果回调
1.下载SDK并引入
下载demo,并引入您的页面: 主页面——main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<script src="path/to/Web_SDK_Base_v.js"></script>
<script src="path/to/Web_SDK_NIM_v.js"></script>
<!-- 是否使用聊天室 -->
<!-- <script src="path/to/Web_SDK_Chatroom_v.js"></script> -->
</body>
</html>
2. 创建登录页面传入登录参数
前端登录页面——index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" href="css/index.css?v=1"/>
<link rel="icon" href="images/icon.ico" type="image/x-icon"/>
</head>
<body>
<div class="bad-network hide tc radius5px" id="j-errorNetwork">已与服务器断开,请检查网络连接</div>
<div class="wrapper radius10px" id="j-wrapper">
<form action="/" method="post">
<div class="row tc">
<span class="icon icon-account"></span>
<input type="text" class="radius5px box-sizing" id="j-account" autofocus="autofocus" autocomplete="on" placeholder="请输入帐号"/>
</div>
<div class="row tc">
<span class="icon icon-pwd"></span>
<input type="password" class="radius5px box-sizing" id="j-secret" placeholder="请输入密码"/>
</div>
<div class="row">
<div class="error-msg hide" id="j-errorMsg">密码错误</div>
</div>
<div class="row tc">
<button type="button" class="btn btn-login" id="j-loginBtn">登录</button>
</div>
</form>
<script src="../3rd/jquery-1.11.3.min.js"></script>
<script src="js/util.js"></script>
<!-- 引入登录参数处理 -->
<script src="js/login.js"></script>
</body>
</html>
登录参数处理———js/login.js
var Login = {
init: function() {
this.initNode();
this.showNotice();
this.initAnimation();
this.addEvent();
},
initNode: function() { // 初始化节点
this.$account = $('#j-account');
this.$pwd = $('#j-secret');
this.$errorMsg = $('#j-errorMsg');
this.$loginBtn = $('#j-loginBtn');
this.$footer = $('#footer');
},
/**
* 如果浏览器非IE10,Chrome, FireFox, Safari, Opera的话,显示提示
*/
showNotice: function() {
var browser = this.getBrowser(),
temp = browser.split(' '),
appname = temp[0],
version = temp[1];
if (['msie', 'firefox', 'opera', 'safari', 'chrome'].contains(appname)) {
if (appname == 'msie' && version < 10) {
this.$footer.find('p').removeClass('hide');
}
} else {
this.$footer.find('p').removeClass('hide');
}
},
addEvent: function() { // 绑定事件
var that = this;
this.$loginBtn.on('click', this.validate.bind(this));
$(document).on('keydown', function(e) {
var ev = e || window.event;
if (ev.keyCode === 13) {
that.validate();
}
});
},
validate: function() { // 登录验证
var that = this,
account = $.trim(that.$account.val()),
pwd = that.$pwd.val(),
errorMsg = '';
if (account.length === 0) {
errorMsg = '帐号不能为空';
} else if (!pwd || pwd.length < 6) {
errorMsg = '密码长度至少6位';
} else {
that.$loginBtn.html('登录中...').attr('disabled', 'disabled');
that.requestLogin.call(that, account, pwd);
that.$loginBtn.html('登录').removeAttr('disabled');
}
that.$errorMsg.html(errorMsg).removeClass('hide'); // 显示错误信息
return false;
},
//这里做了个伪登录方式(实际上是把accid,token带到下个页面连SDK在做鉴权)
//一般应用服务器的应用会有自己的登录接口
requestLogin: function(account, pwd) {
setCookie('uid',account.toLocaleLowerCase());
//自己的appkey就不用加密了
setCookie('sdktoken',pwd);
//setCookie('sdktoken',MD5(pwd));
window.location.href = './main.html';
},
/**
* 获取浏览器的名称和版本号信息
*/
getBrowser: function() {
var browser = {
msie: false,
firefox: false,
opera: false,
safari: false,
chrome: false,
netscape: false,
appname: 'unknown',
version: 0
}, ua = window.navigator.userAgent.toLowerCase();
if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test(ua)) {
browser[RegExp.$1] = true;
browser.appname = RegExp.$1;
browser.version = RegExp.$2;
} else if (/version\D+(\d[\d.]*).*safari/.test(ua)){ // safari
browser.safari = true;
browser.appname = 'safari';
browser.version = RegExp.$2;
}
return browser.appname + ' ' + browser.version;
}
};
Login.init();
3. 接收登录数据创建NIM示实例
var SDKBridge = function (ctr,data) {
var sdktoken = readCookie('sdktoken'),
userUID = readCookie('uid'),
that = this;
if(!sdktoken){
window.location.href = './index.html';
return;
}
window.nim = ctr.nim = this.nim = new NIM({
//控制台日志,上线时应该关掉
debug: true || { api: 'info', style: 'font-size:14px;color:blue;background-color:rgba(0,0,0,0.1)' },
//应用的appkey
appKey: 'ef20061af51118f3f5d9f289d7782cfc',
//云信账号
account: userUID,
//云信token
token: sdktoken,
//连接
onconnect: onConnect.bind(this),
ondisconnect: onDisconnect.bind(this),
onerror: onError.bind(this),
onwillreconnect: onWillReconnect.bind(this),
});
4. 连接结果回调
function onConnect() {
console&&console.log('连接成功');
};
function onWillReconnect(obj){
// 此时说明 `SDK` 已经断开连接,请开发者在界面上提示用户连接已断开,而且正在重新建立连接
};
function onError(error) {
console.log('错误信息' + error);
};
function onDisconnect(error) {
// 此时说明 `SDK` 处于断开状态,开发者此时应该根据错误码提示相应的错误信息,并且跳转到登录页面
var that = this;
console.log('连接断开');
if (error) {
switch (error.code) {
// 账号或者密码错误, 请跳转到登录页面并提示错误
case 302:
alert(error.message);
delCookie('uid');
delCookie('sdktoken');
window.location.href = './index.html';
break;
// 被踢, 请提示错误后跳转到登录页面
case 'kicked':
var map={
PC:"电脑版",
Web:"网页版",
Android:"手机版",
iOS:"手机版",
WindowsPhone:"手机版"
};
var str =error.from;
alert("你的帐号于"+dateFormat(+new Date(),"HH:mm")+"被"+(map[str]||"其他端")+"踢出下线,请确定帐号信息安全!");
delCookie('uid');
delCookie('sdktoken');
//跳转至登录页面
window.location.href = './index.html';
break;
default:
break;
}
}
};
}
自行集成SDK详解
云信Web SDK的要求
浏览器兼容性
云信 Web SDK
兼容到 IE8
, IE8/IE9 需要将项目部署在 HTTPS 环境下才能连接到云信服务器, 其它高级浏览器可以在 HTTP 或者 HTTPS 环境下连接到云信服务器。 数据库兼容性
- 在支持数据库的浏览器上 SDK 会将数据缓存到数据库中, 后续同步都是增量更新, 加快初始化速度 是否支持数据库 // 通过此boolean 值来查看 SDK 在某个浏览器上是否支持数据库 NIM.support.db
- 不使用数据库 如果开发者不想使用数据库, 那么可以设置初始化参数db为false来禁用数据库 var nim = NIM.getInstance({ db: false });
SDK引入须知
SDK 包括若干个模块, 所有的 JS 文件都在 js 目录下.
- 其中 Web_SDK_Base_v.js 是基础模块, 其它模块都依赖于此模块, 在加载其它模块之前需要加载此模块
- 如果要使用 IM 功能, 请再引入 Web_SDK_NIM_v.js
- 如果要使用聊天室功能, 请再引入 Web_SDK_Chatroom_v.js
注:Web_SDK_Base_v.js必须在其他两个模块之前引用,否则会造成其他两个模块无法使用!
初始化SDK详解#初始化SDK详解
云信Web的初始化即创建一个NIM实例,在创建实例的方法中定义回调函数去接收连接状态以及数据回调。
var data = {};
var nim = NIM.getInstance({
//控制台日志,上线时应该关掉
debug: true || { api: 'info', style: 'font-size:14px;color:blue;background-color:rgba(0,0,0,0.1)' },
//应用的appkey
appKey: 'appKey',
//云信账号
account: 'account',
//云信token
token: 'token',
//连接
onconnect: onConnect,
ondisconnect: onDisconnect,
onerror: onError.bind(this),
onwillreconnect: onWillReconnect,
// 多端登录变化
onloginportschange:onLoginPortsChange,
// 群
onteams: onTeams,
onupdateteammember: onUpdateTeamMember,
onteammembers: onTeamMembers,
//消息
onmsg: onMsg,
onroamingmsgs: saveMsgs,
onofflinemsgs: saveMsgs,
//会话
onsessions: onSessions,
onupdatesession: onUpdatesession,
//同步完成
onsyncteammembersdone: onSyncTeamMembersDone,
onsyncdone: onSyncDone,
//个人信息
onmyinfo:onMyInfo,
onupdatemyinfo:onMyInfo,
//系统通知
onsysmsg: onSysMsg,
onofflinesysmsgs: onOfflineSysmsgs,
onupdatesysmsg:onSysMsg,
oncustomsysmsg:onCustomSysMsg,
onofflinecustomsysmsgs:onOfflineCustomSysMsgs,
// 静音,黑名单,好友
onmutelist:onMutelist,
onblacklist: onBlacklist,
onfriends:onFriends,
onsynccreateteam:onSyncCreateteam,
onsyncmarkinblacklist:onSyncMarkinBlacklist,
onsyncmarkinmutelist:onSyncMarkinMutelist,
onsyncfriendaction:onSyncFriendAction
});
初始化SDK详解
function onConnect() {
console&&console.log('连接成功');
};
function onWillReconnect(obj){
// 此时说明 `SDK` 已经断开连接,请开发者在界面上提示用户连接已断开,而且正在重新建立连接
};
function onError(error) {
console.log('错误信息' + error);
};
function onDisconnect(error) {
// 此时说明 `SDK` 处于断开状态,开发者此时应该根据错误码提示相应的错误信息,并且跳转到登录页面
var that = this;
console.log('连接断开');
if (error) {
switch (error.code) {
// 账号或者密码错误, 请跳转到登录页面并提示错误
case 302:
alert(error.message);
delCookie('uid');
delCookie('sdktoken');
window.location.href = './index.html';
break;
// 被踢, 请提示错误后跳转到登录页面
case 'kicked':
var map={
PC:"电脑版",
Web:"网页版",
Android:"手机版",
iOS:"手机版",
WindowsPhone:"手机版"
};
var str =error.from;
alert("你的帐号于"+dateFormat(+new Date(),"HH:mm")+"被"+(map[str]||"其他端")+"踢出下线,请确定帐号信息安全!");
delCookie('uid');
delCookie('sdktoken');
//跳转至登录页面
window.location.href = './index.html';
break;
default:
break;
}
}
};
function onLoginPortsChange(loginPorts) {
console.log('当前登录帐号在其它端的状态发生改变了', loginPorts);
this.controller.loginPorts(loginPorts);
};
function onTeams(teams) {
console.log('收到群列表', teams);
};
function onFriends(friends){
console.log('收到好友列表', friends);
};
function onSessions(sessions){
console.log('收到会话列表', sessions);
};
function onUpdatesession(session){
console.log('会话更新了', session);
};
function onSyncDone() {
console.log('消息同步完成');
};
function onMsg(msg) {
console.log('收到消息', msg.scene, msg.type, msg);
};
function onOfflineSysmsgs(sysMsgs){
console.log('收到离线消息', obj);
}
function onSysMsg(newMsg, msg) {
console.log('收到系统通知', sysMsg)
};
function onCustomSysMsg(msg){
console.log('收到自定义系统通知', sysMsg);
};
function onOfflineCustomSysMsgs(msgs){
console.log('收到离线自定义系统通知', sysMsgs);
};
// 黑名单
function onBlacklist(blacklist){
console.log('收到黑名单', blacklist);
};
//静音
function onMutelist(mutelist){
console.log('收到静音列表', mutelist);
};
function onMyInfo(data){
console.log('收到我的名片', user);
};
function onSyncCreateteam(data){
console.log('同步群列表完成');
};
// 多端同步好友关系
function onSyncFriendAction(data){
console.log('同步其他端好友申请完成');
};
function onSyncMarkinBlacklist(param){
console.log('同步其他端黑名单完成');
};
function onSyncMarkinMutelist(param){
console.log('同步其他端静音列表完成');
};
}
注:SDK 默认会同步所有的数据, 开发者可以通过开关来选择不同步某些数据。 例:“
syncTeamMembers: false,//全成员先不同步了
基于Demo开发
Demo及SDK、UIKIT下载
工程指引
网易云信demo工程基于网易云信webSDK,演示了SDK聊天,群组等功能。用户可参照该demo,将网易云信SDK接入自己的app。 demo中涉及网络请求,需将工程单独部署在用户的本地服务中启动。
例:node环境工程部署
- npm install
- node app
- 在浏览器中访问 http://127.0.0.1:8888/webdemo/index.html
注:必须启服务预览demo文件(node服务只是一个例子,并非必须)
本篇文档内容是否对您有帮助?
有帮助
我要吐槽
此文档对你是否有帮助
×
有帮助
我要吐槽
×