如何开发网易云信web端网页聊天室功能

 PHP   高蒙   阅读(6473)   评论(3)   2016-09-14 15:50:40    网易云信 云信 云信聊天室 


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

下载地址:

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

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

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

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


html文件webdemo/im/index.htmlwebdemo/im/chatroom/room.html

js文件  :webdemo/im/chatroom/dist/js/文件夹下的 emoji.jslink.jsroom.jstitle.jsutil.js

          webdemo/im/js/文件夹下的 config.jslogin.js

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

111.png222.png333.png

第二步:进行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);
    }
  });

  444.png

  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、重新的刷新,就可以看到我们正常的聊天室了。

  555.png

六、结语

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





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客