文档反馈
文档反馈

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;
    },
    //这里做了个伪登录方式(实际上是把accidtoken带到下个页面连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兼容到 IE8IE8/IE9 需要将项目部署在 HTTPS 环境下才能连接到云信服务器, 其它高级浏览器可以在 HTTP 或者 HTTPS 环境下连接到云信服务器数据库兼容性

SDK引入须知

SDK 包括若干个模块, 所有的 JS 文件都在 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环境工程部署

  1. npm install
  2. node app
  3. 在浏览器中访问 http://127.0.0.1:8888/webdemo/index.html

注:必须启服务预览demo文件(node服务只是一个例子,并非必须)

×

反馈成功

非常感谢您的反馈,我们会继续努力做得更好。