Vol. 5

freeswitch语音台30秒挂断_Web

聊天室不同于单聊和群聊,是一类集成了多种 IM 功能一体的大规模实时消息分发系统。在跨入新世纪的2000年,聊天室作为新型的即时通讯场景迅速在年轻人群体中火热起来,“网易聊天室”“碧海银沙”引领了当时语音聊天的热潮。

时至今日,聊天室的势头也不减当年,广泛运用于在线 KTV 、连麦开黑、主播 PK 、在线秀场等场景,还具备文本、表情、点赞、撒花等互动方式,架起沟通桥梁的同时,玩法也更加多变。

本期云信小课堂就教大家如何快速集成聊天室,并实现进出聊天室、简单的消息收发、权限管理等功能。

视频讲解

8分钟视频,手把手教你接入

集成聊天室-基础篇

 Step 1 初始化并进入聊天室

进入聊天室可以有两种方式:以独立模式进入聊天室和非独立模式进入聊天室。

  • 独立模式是指在 IM 处于未登录的情况下,进入聊天室的方式,针对只需要聊天室功能的业务场景。请引入 NIM_Web_Chatroom_*.js ,并通过 Chatroom.getInstance({...}) 来初始化聊天室实例。
  • 非独立模式是指先完成 IM 登录,再进入聊天室的方式,针对需要 IM 和聊天室功能的业务场景。请引入 NIM_Web_SDK_*.js ,并请通过  SDK.NIM.getInstance({...}) 和 SDK.Chatroom.getInstance({...}) 来分别初始化 IM 和聊天室的实例。

这里为了方便演示,选择独立模式:

//引入SDK,import/require引入的方式可以参考官方文档
<script src="NIM_Web_Chatroom_*.js">


// 非匿名方式登录(可以演示收发消息);
//此接口为单例模式, 对于同一个账号, 永远返回同一份实例, 即只有第一次调用会初始化一个实例
var chatroom = Chatroom.getInstance({
  appKey: 'appKey',  //在云信管理后台查看应用的 appKey
  account: 'account',  //帐号,应用内唯一
  token: 'token',  //通过服务器API创建IM账号时获取
  chatroomId: 'chatroomId',  //聊天室 id,通过服务端API https://api.netease.im/nimserver/chatroom/create.action创建
  chatroomAddresses: [       //聊天室地址,通过服务端API https://api.netease.im/nimserver/chatroom/requestAddr.action 获取
    'address1',
    'address2'
  ],
  onconnect: onChatroomConnect,
  onerror: onChatroomError,
  onwillreconnect: onChatroomWillReconnect,
  ondisconnect: onChatroomDisconnect,
  // 收到消息的回调, 会传入消息数组,这个会是高频使用的回调
  onmsgs: onChatroomMsgs
});
function onChatroomConnect(obj) {
  console.log('进入聊天室', obj);
  // 连接建立后的回调,表示已成功进入聊天室,这个时候才能去发消息
}
function onChatroomWillReconnect(obj) {
  // 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
  console.log('即将重连', obj);
}
function onChatroomDisconnect(error) {
  // 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
  console.log('连接断开', error);
  if (error) {
    switch (error.code) {
    // 账号或者密码错误, 请跳转到登录页面并提示错误
    case 302:
      break;
    // 被踢, 请提示错误后跳转到登录页面
    case 'kicked':
      break;
    default:
      break;
    }
  }
}
function onChatroomError(error, obj) {
  console.log('发生错误', error, obj);
}
function onChatroomMsgs(msgs) {
  console.log('收到聊天室消息', msgs);
}

 Step 2 收发消息

进入聊天室成功后才能发送/接受消息:

//发送消息
var msg = chatroom.sendText({
  text: 'hello',
  done: sendChatroomMsgDone
});
console.log('正在发送聊天室text消息, id=' + msg.idClient);
function sendChatroomMsgDone(error, msg) {
  console.log('发送聊天室' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient, error, msg);
  //发送成功后,聊天室其他人会收到onmsgs的回调;
}




//接收普通消息和通知消息,通过初始化时注册的回调onmsgs来接收消息
function onChatroomMsgs(msgs) {
  console.log('收到聊天室消息', msgs);
}

Step 3 权限管理

聊天室成员管理和聊天室信息查询:

//设置管理员权限,只有聊天室创建者才有权限
var Manager = chatroom.markChatroomManager({
  account: 'account', //需要设置为管理员的accid
  isAdd: true,
  done: markChatroomManagerDone
});
function markChatroomManagerDone(error, obj) {
  console.log('添加聊天室管理员' + (!error?'成功':'失败'), error, obj.member);
}




//设置禁言,只有管理员和聊天室创建者有这个权限
var Gaglist = chatroom.markChatroomGaglist({
  account: 'account',//需要禁言的accid
  isAdd: true,
  done: markChatroomGaglistDone
});
function markChatroomGaglistDone(error, obj) {
  console.log('添加聊天室禁言名单' + (!error?'成功':'失败'), error, obj.member);
}




//设置黑名单,只有管理员和聊天室创建者有这个权限
var Blacklist = chatroom.markChatroomBlacklist({
  account: 'account', //需要拉黑的accid
  isAdd: true,
  done: markChatroomBlacklistDone
});
function markChatroomBlacklistDone(error, obj) {
  console.log('添加聊天室黑名单' + (!error?'成功':'失败'), error, obj.member);
}




//聊天室信息查询,可以查询到当前聊天室在线人数onlineMemberNum
var roomInfo = chatroom.getChatroom({
  done: getChatroomDone
});
function getChatroomDone(error, obj) {
  console.log('获取聊天室信息' + (!error?'成功':'失败'), error, obj);
}

 Step 4 离开聊天室

离开或切换聊天室:

// 离开聊天室,在收到进入聊天室成功的回调后就可以调用disconnect来退出聊天室
chatroom.disconnect()




// 切换聊天室,先断开聊天室再更新token然后重新连接
chatroom.disconnect() //断开聊天室
chatroom.setOptions({ // 更新 token,参数列表和格式跟Chatroom.getInstance保持一致
  token: 'newToken'
});
chatroom.connect() // 重新连接

集成聊天室-Demo篇

 Step 1 下载 Demo

Demo 链接:

https://github.com/netease-kit/NIM_Web_Demo,下载到本地,解压后通过 IDE 打开,下载期间,率先获取 APP_KEY ;

freeswitch语音台30秒挂断_网易云_02

如何获取 APP_KEY ?

如果已经是网易云信开发者,可以直接从网易云信的控制后台获取 APP_KEY ;

如果是第一次体验,则需要前往网易云信官网(http://163.lu/f04GM3)注册云信账号-创建应用-点击 App_Key 管理即可获取相关信息。

freeswitch语音台30秒挂断_聊天室_03

 Step 2 运行 Demo

在 

NIM_Web_Demo-master\webdemo\imNew\js\config.js 

里面输入对应环境的 APP_KEY ,然后在 Demo 根目录下执行 npm install 和 node app命令。

freeswitch语音台30秒挂断_freeswitch语音台30秒挂断_04

freeswitch语音台30秒挂断_freeswitch语音台30秒挂断_05

 Step 3 体验 Demo 功能

打开

http://127.0.0.1:8182/webdemo/imNew/index.html

体验 Demo 功能(建议先登录账号);

freeswitch语音台30秒挂断_聊天室_06

freeswitch语音台30秒挂断_聊天室_07

Demo 中实现收发消息、禁言、拉黑等相关功能的代码在 NIM_Web_Demo-master\webdemo\imNew\chatroom\src\js\link.js 和 room.js 里面,大家可以参考 API 文档自行补充更多功能。

freeswitch语音台30秒挂断_freeswitch语音台30秒挂断_08

总结

以上就是网易云信聊天室解决方案 Demo Web 端接入流程的详细解说,按照如上步骤就可以轻松完成聊天室的搭建。