关于对接网易云即时通信IM的心得

基于客户需求考虑，需要在项目中接入即时通信的功能。分别为医生端和患者端。需要同时在这两个项目中接入。实现患者和医生能够在线聊天。刚开始，是把网易云即时通信的代码demo 拉到本地后，把demo跑起来。开始看代码逻辑。公司前端项目是react写的。由于本人对react不熟悉。所以就想能不能不把网易云即时通信的代码集成到公司项目。而是单独把含有即时通信的代码跑起来。原项目去调用呢？答案是当然可以。

下边是我的解决逻辑和代码实现

我的逻辑是把网易云即时通信的代码放到一个web项目中，然后用tomcat跑起来。在用原来的项目通过iframe标签访问到它。直接上代码

一、医生端的改造

每一次发起在线沟通的时候，都需要拿到发起沟通者和被发起沟通者的信息，将这两个信息以参数的形式去调用网易云即时通信IM的API 去进行网易云沟通账号的创建（如果之前已经新建了账号，不会在新建），每一次调用，网易云API会返回对应的 accid和token，由于我需要同时创建医生端沟通账号和患者端沟通账号。（因为访问即时通信web项目的时候。需要带过去）医生端代码如下

@RequestMapping(value = "creates", method = RequestMethod.GET)public List<IMTokenDTO> createAndLogin(String zuid, String zname, String patientId, String name){//获取医生端当前登陆医生信息UsernamePasswordAuthenticationToken tokens = (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();UserEntity user = userService.retrieveUserByUsername(tokens.getName());zuid = user.getId();//设置当前登陆医生网易云uidzname = user.getName();//获取当前登陆医生名称 设置名称//String substring = name.substring(0, 1);//拿到医生信息，请求一次网易云APIHttpEntity andLogin = createAndLogin(zuid, zname);//拿到患者信息，请求一次网易云apiHttpEntity andLogin2 = createAndLogin(patientId, name);//转json 方便取值JSONObject zjson = (JSONObject) JSONObject.toJSON(andLogin.getBody());JSONObject bjson = (JSONObject) JSONObject.toJSON(andLogin2.getBody());List<IMTokenDTO> list = new ArrayList<>();int code = (int) zjson.get("code");int code1 = (int) bjson.get("code");//判断是否成功if(code == 200 && code1 == 200){JSONObject zinfo = (JSONObject) JSONObject.toJSON(zjson.get("info"));String token = (String) zinfo.get("token");String accid = (String) zinfo.get("accid");IMTokenDTO zimTokenDTO = new IMTokenDTO();zimTokenDTO.setToken(token);zimTokenDTO.setAccid(accid);list.add(zimTokenDTO);JSONObject binfo = (JSONObject) JSONObject.toJSON(bjson.get("info"));String btoken = (String) binfo.get("token");String baccid = (String) binfo.get("accid");IMTokenDTO bimTokenDTO = new IMTokenDTO();bimTokenDTO.setToken(btoken);bimTokenDTO.setAccid(baccid);bimTokenDTO.setName(name);list.add(bimTokenDTO);//将医生、患者 accid和token返回到前端return list;}else{IMTokenDTO ImTokenDTO = new IMTokenDTO();ImTokenDTO.setToken("授权无效");list.add(ImTokenDTO);return list;}}

医生端前端代码，接收后台返回的accid和token，然后通过iframe标签去请求网易云即时通信web项目

//在线沟通const setScrrentss=(patrentId,name)=> {request({url: api.schedule.im163createUser,method: 'get',data: {patientId: patrentId,name: name,},}).then((res) => {let im163 = []if (res) {let zaccid = res[0].accid;let ztoken = res[0].token;let baccid = res[1].accid;let btoken = res[1].token;let name = res[1].name;var url1 = "http://000.000.000.00:38100/8182/socket_demo/webdemo/imNew/main.html?zaccid="+zaccid+"&ztoken="+ztoken+"&baccid="+baccid+"&btoken="+btoken+"&name="+name;im163.push(//<iframe src='http://127.0.0.1:8182/webdemo/imNew/main.html?zaccid="zaccid+"&ztoken="+ztoken+"'height="90%" width="90%"></iframe><div align="center" style={{width:"100%",height:"100%"}}><iframe src={url1} className="ifm" scrolling="no" hspace="-100" vspace="-150"></iframe></div>)console.log(res.data)elementList(im163);}});}

二、患者端的改造

患者端的改造和医生端的改造很相似。都是发起在线沟通的时候。请求后台，去调用网易云API获取到accid和token返回给前台

 @RequestMapping(value = "creates", method = RequestMethod.GET)public List<IMTokenDTO> createAndLogins(String doctorId,String doctorName){//获取当前登陆患者信息String patientId=((JKWHAuthenticationToken) SecurityContextHolder.getContext().getAuthentication()).getPatientId();//通过patientId获取当前登陆患者信息ResidentEntity residentEntity = residentService.retrievalResidentById(patientId);DoctorInfo doctorByDid = new DoctorInfo();//调用网易云APIHttpEntity andLogin = createAndLogin(patientId, residentEntity.getFullName());HttpEntity andLogin2 = null;log.info("doctorId========"+doctorId);log.info("doctorName========"+doctorName);//判断当前是否有沟通记录if(StringUtils.isEmpty(doctorId) && StringUtils.isEmpty(doctorName)){//根据患者ID查询沟通列表List<TCommunicateRecord> communRecord = tCommunicateRecordService.getCommunRecord(patientId);if(null == communRecord || communRecord.size() == 0){log.info("沟通列表无数据，当前没有沟通记录==========");//代表之前没有沟通记录if(residentEntity.getDoctorId()!=null){//获取对应的医生信息doctorByDid = doctorInfoService.findDoctorByDid(residentEntity.getDoctorId());}else{//获取对应的医生信息(根据sql语句随机查询)//doctorByDid = doctorInfoService.findDoctorByDid("5dd4a9c024c6415884abd085504f4725");doctorByDid = doctorInfoService.randomDoctor();}}else{log.info("沟通列表有数据，当前有沟通记录==========");//过滤掉沟通列表已有医生，随机查询一条医生数据doctorByDid = doctorInfoService.randomFilterDoctor(patientId);}andLogin2 = createAndLogin(doctorByDid.getDoctorUid(), doctorByDid.getName());TCommunicateRecord tCommunicateRecord = new TCommunicateRecord();String uuid = UUID.randomUUID().toString().trim().replaceAll("-", "");tCommunicateRecord.setId(uuid);tCommunicateRecord.setDoctorId(doctorByDid.getDoctorUid());tCommunicateRecord.setDoctorName(doctorByDid.getName());tCommunicateRecord.setPatientId(residentEntity.getPatientId());tCommunicateRecord.setPosition(doctorByDid.getTitle());tCommunicateRecord.setDepartment(doctorByDid.getDeptName());//生成创建数据日期时间Timestamp date = new Timestamp(new Date().getTime());tCommunicateRecord.setDommunicationTime(date);//将本次患者与医生沟通 记录到DBtCommunicateRecordService.addCommunicateRecord(tCommunicateRecord);}else{log.info("当前已有沟通记录=========");andLogin2 = createAndLogin(doctorId, doctorName);}JSONObject zjson = (JSONObject) JSONObject.toJSON(andLogin.getBody());JSONObject bjson = (JSONObject) JSONObject.toJSON(andLogin2.getBody());List<IMTokenDTO> list = new ArrayList<>();int code = (int) zjson.get("code");int code1 = (int) bjson.get("code");//判断是否成功if(code == 200 && code1 == 200){JSONObject zinfo = (JSONObject) JSONObject.toJSON(zjson.get("info"));String token = (String) zinfo.get("token");String accid = (String) zinfo.get("accid");IMTokenDTO zimTokenDTO = new IMTokenDTO();zimTokenDTO.setToken(token);zimTokenDTO.setAccid(accid);list.add(zimTokenDTO);JSONObject binfo = (JSONObject) JSONObject.toJSON(bjson.get("info"));String btoken = (String) binfo.get("token");String baccid = (String) binfo.get("accid");IMTokenDTO bimTokenDTO = new IMTokenDTO();bimTokenDTO.setToken(btoken);bimTokenDTO.setAccid(baccid);String doctorNames = null;if(StringUtils.isEmpty(doctorByDid.getName())){doctorNames = doctorName.substring(0, 1);}else{doctorNames = doctorByDid.getName().substring(0, 1);}bimTokenDTO.setName(doctorNames+"医生");list.add(bimTokenDTO);return list;}else{IMTokenDTO ImTokenDTO = new IMTokenDTO();ImTokenDTO.setToken("授权无效");list.add(ImTokenDTO);return list;}}

患者端前端代码拿到后台返回的accid和token 然后通过iframe标签去请求网易云即时通信web项目

 onDateChange = () => {let prop = getCurrentInstance().router.params;let id = "";let name = "";if(prop.doctorId !== "undefined" || prop.doctorName !== "undefined"){id = prop.doctorId;name = decodeURI(prop.doctorName);}request.get(config.apiHost + "/im/163cloud/creates",{doctorId: id,doctorName: name}).then((res) => {if(res){let zaccid = res[0].accid;let ztoken = res[0].token;let baccid = res[1].accid;let btoken = res[1].token;let name = res[1].name;//var url = "http://000.000.000.00:38100/8182/socket_demo/webdemo/imNew/main.html?zaccid=yinhao2&ztoken=123456&baccid=yinhao1&btoken=123456";var url1 = "http://000.000.000.00:38100/8182/socket_demo/webdemo/im/main.html?zaccid="+zaccid+"&ztoken="+ztoken+"&baccid="+baccid+"&btoken="+btoken+"&name="+name;this.setState({url: url1,});}})};componentDidMount() {this.onDateChange()}render() {return <View className="page"><View className="doc-body"><Header title="找医生" showBack={true} /><iframe style={{minHeight:"100vh",width:"100%"}} src={this.state.url}></iframe></View></View>}

三、网易云即时通信web项目改造

我是新建了一个web项目，然后将网易云即时通信demo代码拿到新建的web项目中。使它单独跑起来。上代码在web项目中，首次访问。会先走main.js 由于我们是通过参数将accid和token传过来的，所以需要获取到参数中的值。红框圈起来的是获取参数值。并且set到cookie中，因为网易云即时通信登陆的时候，值就是从cookie中取得。

/*** 主要业务逻辑相关*/setCookie("uid", getParams("zaccid"));setCookie("sdktoken", getParams("ztoken"));setCookie("baccid", getParams("baccid"));setCookie("name", getParams("name"));var userUID = readCookie("uid")
/*** 实例化* @see module/base/js*/
var yunXinfunction getParams(key) {let search = window.location.search.replace(/^\?/, "");let pairs = search.split("&");let paramsMap = pairs.map(pair => {let [key, value] = pair.split("=");return [decodeURIComponent(key), decodeURIComponent(value)];}).reduce((res, [key, value]) => Object.assign(res, { [key]: value }), {});return paramsMap[key] || "";
}
// 等待私有化配置请求完毕
if (CONFIG.usePrivateEnv === 1) {function waitPrivateConf() {if (CONFIG.privateConf || CONFIG.usePrivateEnv === 2) {yunXin = new YX(userUID)} else {setTimeout(waitPrivateConf, 1000)}}waitPrivateConf()
} else {yunXin = new YX(userUID);
}

之后就是走base.js中的函数。

好了，基本上走到这里。应该是可以实现一个基础的网易云即时通信功能了。后续有时间我在更新优化的部分。

关于对接网易云即时通信IM的心得相关推荐

移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
网易云亮相GITC,聚合多样化通信与视频云平台
近年来,随着移动互联网的大行其道,单纯以文字.语音.视频为媒介的沟通方式已经不能满足人们的沟通需求.而在各行业数字化转型的浪潮中,融合性的通信和视频服务越来越多地被应用到不同的场景中. 整合性的通信与 ...
响铃：整合通信与视频，网易云能成为丁磊的下一个“爆款”吗？
文/曾响铃近两年云计算获得空前爆发,据<福布斯>网站引用贝恩咨询公司(Bain&Company)的一份报告称,预计到2020年,全球云计算市场规模将达到3900亿美元.对比201 ...
整装再出发！网易云通信与视频2年接入40万开发者
2017年10月,网易云通信与视频正式迎来迎来两周年庆.在,两周年之际,网易云在产品端已实现通信与视频业务的战略升级,通过多元化和场景化的通信与视频的产品布局和完善的服务体系,为行业用户带来丰富的场景 ...
网易云通信与视频业务升级万维计划普及场景化云服务
5月24日,网易云通信与视频业务正式升级,将整合网易云信与网易视频云的技术和服务优势,并秉持"E=mc²"的全新价值观,为用户提供多场景.高稳定性.高可用的通信与视频云服务.同时, ...
InfoQ专访网易云陈谔:用微服务体系满足企业数字化转型需求
现在的公有云市场,国外有AWS,Google Cloud和微软的Azure三足鼎立,国内则是阿里云一家独大,即便如此,在数字化浪潮下,云计算市场依然有很多玩家进场,各家竞争也相当激烈.在这样的环境下, ...
网易云以场景化云服务力拓教育行业
5月24日, "2017年中国互联网+教育CEO高端研讨会"在北京举行.研讨会就云计算.人工智能等科技力量赋能教育产业升级的前景和实践进行了探讨.网易云通信与视频副总经理王丹丹发表 ...
[Web端接入经验分享] 腾讯云即时通信TIM、实时音视频TRTC
[Web端接入经验分享] 腾讯云即时通信TIM.实时音视频TRTC 即时通信TIM官网地址即时通信TIM SDK API文档地址实时音视频TRTC官网地址实时音视频TRTC SDK API文档地 ...
TOP100summit2017：网易云通信与视频CTO赵加雨：外力推动下系统架构的4个变化趋势...
壹佰案例:很荣幸邀请到您成为第六届壹佰案例峰会架构专场的联席主席,您曾深度参与Cisco Jabber,Webex Meeting, Cisco Spark等多项分布式实时通信类产品的架构与研发,您觉 ...
TOP100summit2017：网易云通信与视频CTO赵加雨：外力推动下系统架构的4个变化趋势
壹佰案例:很荣幸邀请到您成为第六届壹佰案例峰会架构专场的联席主席,您曾深度参与Cisco Jabber,Webex Meeting, Cisco Spark等多项分布式实时通信类产品的架构与研发,您觉 ...

关于对接网易云即时通信IM的心得

关于对接网易云即时通信IM的心得相关推荐

最新文章

热门文章