融云WEB运行点对点私聊极简Demo

这两天帮朋友客户完善了IM项目链上缺失的WEB版本，所以写这篇文章，我删除了某个节点关于githistory，我觉得以后可能会用到，方便别人开源。本身并不难，可以作为示范或测试可行性。这里使用的app_key和app_secret都是beta版本，只有100股，如果没有问题，请不要闹，谢谢。源码kvker/rongyun使用clone或者下载源码包，打开后用cd进入。npmi或cnpmi打开http://localhost:8888和http://localhost:8888/test.html来测试root之间的聊天，测试两个用户。有关其他说明，请参阅readme.md。源码简单解读。原项目支持私聊、群聊等复杂功能。这只是一个简单的一对一聊天，所以代码非常精简。主要难点在于：服务端获取token，返回给前端监控相关状态和信息。首先是服务器端，对应的文件是server.js。有两个坑：融云请求的app_key放在headers，post内容格式为formdata问题1因为我自己踩的，其实本质上是不小心，希望大家不要有再次踩到它。问题2直接看代码：请求加密关键参数constapp_secret='融云的[app_key]'constsignAppKey=(nonce,timestamp)=>{letbase=app_secret+nonce+timestampreturnenc.Hex.stringify(SHA1(base))}依赖npm的crypto-js包，提供enc和SHA1。其他的问题，看源码就好了，没什么太特别的。然后是前端，主要是官方文档的cv攻略。最大的坑就是命令的调用顺序：初始化监听获取token连接通信或者拉取相关数据嗯，相信我，你会踩到的。连接状态监控，负责友好提示：//连接状态监控RongIMClient.setConnectionStatusListener({onChanged:(status)=>{//status标识当前连接状态switch(status){caseRongIMLib.ConnectionStatus.CONNECTED:console.log('连接成功')breakcaseRongIMLib.ConnectionStatus.CONNECTING:console.log('connecting')breakcaseRongIMLib.ConnectionStatus.DISCONNECTED:console.log('disconnected')breakcaseRongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:控制台。log('其他设备登录，此端被踢')breakcaseRongIMLib.ConnectionStatus.DOMAIN_INCORRECT:console.log('域名不正确，请到开发者后台查看安全域名配置')breakcaseRongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:console.log('网络不可用，此时可以调用reconnect重新连接')breakdefault:console.log('Thelinkstatusis',status)break}}})信息接收和监听，负责页面逻辑：//收到消息ListentoRongIMClient.setOnReceiveMessageListener({//收到消息onReceived:res=>{letmessageContent=res.cointent//确定消息类型switch(res.messageType){caseRongIMClient.MessageType.TextMessage://文本消息console.log('textcontent',messageContent.content)//res.senderUserIdconsole.log(res)this.reciveMessage(res)breakcaseRongIMClient.MessageType.ImageMes??sage://图片消息console.log('imagethumbnailbase64',messageContent.content)console.log('originalimageurl',messageContent.imageUri)breakcaseRongIMClient.MessageType.HQVoiceMessage://音频消息console.log('audiotype',messageContent.type)//Codec类型，默认为aacAudioconsole.log('audiourl',messageContent.remoteUrl)//Play:console.log('audioduration',messageContent.duration)breakcaseRongIMClient.MessageType.RichContentMessage://富文本（图形）消息console.log('textcontent',messageContent.content)console.log('imagebase64',messageContent.imageUri)console.log('原始图片url',messageContent.url)breakcaseRongIMClient.MessageType.UnknownMessage://未知消息console.log('未知消息，请检查自定义消息格式是否正确',message)breakdefault:console.log('收到消息',res)this.reciveMessage(res)break}}})然后就连接上了：//融云连接RongIMClient.connect(token,{onSuccess:(userId)=>{console.log('连接成功，用户id为',userId)},onTokenIncorrect:()=>{console.log('连接失败，失败原因：令牌无效')},onError:(errorCode)=>{letinfo=''switch(errorCode){caseRongIMLib.ErrorCode.TIMEOUT:info='连接超时'中断案例RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:info='Unacceptableprotocolversion'中断案例RongIMLib.ConnectionState.IDENTIFIER_REJECTED:info='appkeyisincorrect'中断案例RongIMLib.ConnectionState.SERVER_UNAVAILABLE:info='Serverunavailable'中断default:info=errorCodebreak}console.log('Connectionfailed,failurereason:',info)}})注意userId独树一帜，收录在融云项目库中。name和portraitUri是强制性的。应从您的数据库中检索这些内容以获取用户比较信息。userId必须是唯一的。其他代码是常规的页面渲染等，这里不再赘述。注意前端代码JS部分使用ES6方便改写，IE和Safari不适用。