基于客户需求考虑，需要在项目中接入即时通信的功能。分别为医生端和患者端。需要同时在这两个项目中接入。实现患者和医生能够在线聊天。刚开始，是把网易云即时通信的代码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中的函数。
好了，基本上走到这里。应该是可以实现一个基础的网易云即时通信功能了。后续有时间我在更新优化的部分。
