以下是一个从零开始创建 NIM 实例并实现一个简单的即时通讯小 demo 的示例代码:
在 HTML 文件中引入 NIM Web SDK
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NIM Web SDK Demo</title>
</head>
<body>
<h1>NIM Web SDK Demo</h1>
<script src="https://cdn.netease.im/web-sdk/NIM_Web_SDK_v8.9.107.js"></script>
<script src="index.js"></script>
</body>
</html>
在 HTML 文件中引入了 NIM Web SDK 和一个名为 index.js 的 JavaScript 文件。index.js 文件将包含创建 NIM 实例和实现即时通讯功能的 JavaScript 代码。
创建 NIM 实例并进行登录
var nim = SDK.NIM.getInstance({
appKey: 'your_app_key',
account: 'your_username',
token: 'your_password_or_token',
onconnect: function() {
console.log('连接成功');
},
onerror: function(error) {
console.log('连接出错,错误码:' + error.code + ',错误信息:' + error.message);
}
});
nim.connect();
在 JavaScript 文件中创建了一个 NIM 实例,并在创建时传入了登录所需的 appKey、account 和 token 参数,以及 onconnect 和 onerror 回调函数。然后,调用 nim.connect() 方法进行登录操作。
实现即时通讯功能
var sendBtn = document.getElementById('sendBtn');
var msgInput = document.getElementById('msgInput');
var msgList = document.getElementById('msgList');
sendBtn.addEventListener('click', function() {
var msg = msgInput.value;
nim.sendText({
scene: 'p2p',
to: 'other_username',
text: msg,
done: function(error, msg) {
if (!error) {
addMsg('我', msg.text);
msgInput.value = '';
}
}
});
});
nim.on('msg', function(msg) {
if (msg.scene === 'p2p' && msg.target === 'your_username') {
addMsg('other_username', msg.text);
}
});
function addMsg(sender, content) {
var li = document.createElement('li');
li.innerHTML = '<strong>' + sender + ':</strong>' + content;
msgList.appendChild(li);
}
在 JavaScript 文件中,使用 addEventListener() 方法为发送按钮添加了一个点击事件监听器。当点击发送按钮时,将读取文本框中的消息内容,并调用 nim.sendText() 方法发送消息。
nim.sendText() 方法的参数包括要发送的场景(这里使用了 p2p 场景)、接收者的用户名、消息文本和完成回调函数。完成回调函数会在消息发送完成后被调用,如果没有错误,则将新消息添加到消息列表中,并清空文本框。
同时,使用 nim.on() 方法注册了一个 msg 事件监听器。当接收到新消息时,将检查消息的场景和接收者是否符合条件,如果是则将新消息添加到消息列表中。
最后,还定义了一个 addMsg() 函数,用于将消息添加到消息列表中。该函数创建一个新的 li 元素,设置其 innerHTML 属性为发送者和消息内容的组合,然后将其添加到消息列表中。
完整的 HTML 和 JavaScript 代码
HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NIM Web SDK Demo</title>
</head>
<body>
<h1>NIM Web SDK Demo</h1>
<ul id="msgList"></ul>
<div>
<input id="msgInput" type="text" placeholder="请输入消息">
<button id="sendBtn">发送</button>
</div>
<script src="https://cdn.netease.im/web-sdk/NIM_Web_SDK_v8.9.107.js"></script>
<script src="index.js"></script>
</body>
</html>
JavaScript 代码:
var nim = SDK.NIM.getInstance({
appKey: 'your_app_key',
account: 'your_username',
token: 'your_password_or_token',
onconnect: function() {
console.log('连接成功');
},
onerror: function(error) {
console.log('连接出错,错误码:' + error.code + ',错误信息:' + error.message);
}
});
nim.connect();
var sendBtn = document.getElementById('sendBtn');
var msgInput = document.getElementById('msgInput');
var msgList = document.getElementById('msgList');
sendBtn.addEventListener('click', function() {
var msg = msgInput.value;
nim.sendText({
scene: 'p2p',
to: 'other_username',
text: msg,
done: function(error, msg) {
if (!error) {
addMsg('我', msg.text);
msgInput.value = '';
}
}
});
});
nim.on('msg', function(msg) {
if (msg.scene === 'p2p' && msg.target === 'your_username') {
addMsg('other_username', msg.text);
}
});
function addMsg(sender, content) {
var li = document.createElement('li');
li.innerHTML = '<strong>' + sender + ':</strong>' + content;
msgList.appendChild(li);
}
注意,上述代码中的 your_app_key、your_username、your_password_or_token 和 other_username 都需要替换为你自己的应用密钥、用户名、密码或 token,以及另一个用户的用户名。
当然,这只是一个非常简单的 demo,仅仅实现了发送和接收文本消息的功能。在实际应用中,你还需要考虑一些其他因素,例如网络连接状态、消息的处理和存储、用户权限管理等。