网易云实时通信WEB IM-云信入门使用经验

请在github fork代码，如果发现有bug或有有趣的想法可以提交issue，我会定期采纳。
⚠️ 需要现成的vue Im的请进：http://www.jianshu.com/p/3914f1a8e1ef
vue版IM的github 链接：https://github.com/walk-liuyan/vue-im
不解可以留言，期待你有意义的问题😊
【看完该教程，能满足使用demo嵌入自己的项目中】
1天前，boss想要把web云信嵌入目前正在开发的网站业务中，我当时一脸懵逼，内心是有点恐惧的。然后文档看一半，就跑着网上去找有没有经验帖！没有！！
虽然现在用完也觉得很简单，但是刚接触的时候有点不知所措。

1、入手前，阅读

http://dev.netease.im/docs/product/音视频通话/新手接入指南

2、到github上面下载demo

https://github.com/netease-im/NIM_Web_Demo

打开terminal，进入文件夹，然后输入 node app
这时候到浏览器输入：http://localhost:8888/webdemo/im/index.html进行预览
官方demo，就可以随便玩啦。这时候的demo链接的是网易云的服务器和网易云demo应用的keyapp。

3、进入demo进行参数修改，让其为自己所用

（1）进入config.js进行keyapp的更换。

将你公司网易云账号中应用的密钥填入红框内的appkey
（2）这时候你要将登录的信息发送给自己公司的服务器，服务器会返回相关数据。

进入login.js,将requestLogin改成如下：
requestLogin: function(account, pwd) {
        $.ajax({
            type: 'POST',
            url: "https://XXXXXlogin",//自己公司的login的网址
            data: JSON.stringify({
                username:account ,
                password:pwd,
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
        }).then((res)=>{
            console.log('res', res)
            setCookie('uid',res.data.neteaseAccid);    
//括号里的内容换成后端程序员哥哥给你返回的id和token
            setCookie('sdktoken',res.data.neteaseToken);
            window.location.href = './main.html';
        });
    },

如图是后端程序员哥哥该返回给你的数据：

（3）这个时候，你就能正常登录啦！（数据库里的用户都可以登录啦）
这个时候我碰到一个问题，就是头像图片请求400
数据库里程序员哥哥通常都是存原始url给你。但是在demo文件中的util.js中会给你添加一些参数，

在我的案例里面，我将代码变成了：

       return url + "?thumbnail=80x80&quality=85";

4 、完成云信基本使用。

大家可以看公司需求修改样式之类的东西。

预览界面：