网易云信的即时通讯本来这块都是直接嵌套在App里面的。后来业务需求，需要分享app里面的在线聊天室，外部游客也可以在线的收看，但是不可以发言。拿到需求，那么我们就开始开发吧。在云信的官网可以看到云信也有web端的sdk文档，直接下载下来。

下载地址：

http://dev.netease.im/docs?doc=web_demo

这份demo文档包括了基本的单人聊天，群组，聊天室的功能演示。我们只要根据自己的需求进行开发即可。都是静态的文件js、html和图片等。真正需要开发的不是很多，只要你能够耐心的查看就可以解决问题。

第一步：我们打开下载的资源包。

这里我们简单的看下，需要用到的文件。因为我这里的需要的只是简单的聊天室展示功能，所以只要修改几个文件。

html文件：webdemo/im/index.html、webdemo/im/chatroom/room.html

js文件  ：webdemo/im/chatroom/dist/js/文件夹下的 emoji.js、link.js、room.js、title.js、util.js。

          webdemo/im/js/文件夹下的 config.js、login.js

... 真正需要修改的文件不止这些，我只是列举部分，需要用到哪些就去对应的js修改即可。

第二步：进行web聊天室的开发。

开发之前我们要说下请求的地址：http://你的host/room.html?roomid=聊天室ID

一、修改配置文件：webdemo/im/js/config.js。将三个appkey的值，都修改为我们自己的appkey。具体的appkey值在云信的管理后台是可以看到的。

二、修改登录文件：webdemo/im/js/login.js。这里呢，我们就要配合后台进行操作了。因为。云信是不允许用户不登陆直接进入他们的服务器的。所以，我们只能使用伪登录的方式进行操作。

云信有个好处是，他不限用户的数量，也就是说你可以无限的添加用户，可以创建临时用户伪登录云信服务器。这里呢，简单的说下我的思路。

•   1、当用户打开的时候，我们直接创建一个临时用户并登录到云信服务器。

•   2、登录的同时我们将记录下cookie值，下次打开先判断cookie是否存在，已存在就不在新建用户。

三、服务器端php代码。

配合登录使用的服务器端php代码，我这里用的thinkphp框架。

// 获取聊天室ID
$roomid  = I('get.roomid');
cookie('sy_yun_roomid',$roomid);
$sy_yun_id = cookie('sy_yun_id');
// 获取云信的cookies 没有就创建一个临时的用户ID
if($sy_yun_id){
    $accid = $sy_yun_id;
    $token   = md5($sy_yun_id.$this->salt);
}else{
    // 添加到云信临时用户表 本地记录
    $id = M('user_yunxin')->add(array('addtime'=>time()));
    $accid = 'temp'.$id;
    $token = md5($accid.$this->salt);
    M('user_yunxin')->where(array('id'=>$id))->save(array('accid'=>$accid,'token'=>$token));
    // 同步到云信
    $name = '游客'.$id;
    $icon = '';
    // 此处是将用户添加到云信的服务器
    $Yun = new \Org\Util\YunxinServer($this->AppKey,$this->AppSecret,'curl');
    $Yun->createUserIds($accid,$name,'{}',$icon,$token);
    cookie('sy_yun_id',$accid);
}
// 将得到的accid 和 token直接带到前台登录
$this->assign('accid',$accid);
$this->assign('token',$token);
$this->display();

四、前台登录云信服务器的修改。

  1、修改的登录首页文件：webdemo/im/index.html。将得到的accid和token的值，直接的填写到登录的表单值里面。并且页面自动的点击登录按钮。

<script>
    $(function(){
      $('#j-loginBtn').click();
    });
  </script>

  2、修改登录的js文件：webdemo/im/js/login.js。找到代码

requestLogin: function(account, pwd) {
    setCookie('uid',account.toLocaleLowerCase());
    // 因为我们后台已经加密处理过了,这里就不需要加密了
    setCookie('sdktoken',pwd);
    // setCookie('sdktoken',MD5(pwd));
    // 直接跳转到聊天室页面
    window.location.href = '/room.html';
},

  3、上面为止就可以实现登录云信服务器的功能了。

五、进入聊天室的功能开发。

  1、进入聊天室的时候，需要一些必要的参数。比如：用户ID、token、聊天室ID、聊天室直播地址等。

  2、修改操作文件：webdemo/im/chatroom/dist/js/link.js。这里我们可以注释掉云信自己的方法，自己写接口调用数据(因为我觉得自己写的方便点)。

  js代码：

$.ajax({
    url:'/Nim/getRoomInfo',
    type:'post',
    data:'',
    success:function(data){
        that.address = data.address;
        doLink(data);
    }
  });

  php代码：

public function getRoomInfo(){
        // 获取直播的地址
        $roomid = cookie('sy_yun_roomid');
        $accid  = cookie('sy_yun_id');
// 获取聊天室的直播地址 具体方法查看云信server接口文档
        $Yun = new \Org\Util\YunxinServer($this->AppKey,$this->AppSecret,'curl');
        $address = $Yun->getrequestAddr($roomid,$accid);
        $token   = md5($accid.$this->salt);
        $data = array('id'=>$roomid,'account'=>$accid,'address'=>$address['addr'],'token'=>$token,'appKey'=>$this->AppKey);
        $this->ajaxReturn($data);
    }

  3、重新的刷新，就可以看到我们正常的聊天室了。

六、结语

通过上面的步骤，基本上网易云信web聊天室功能开发就结束了，当然在开发中还有文件路径的修改和样式的展示等，我就不一一列举了，都是很简单的操作。