即时通讯 - SDK.NIM.getInstance 实现一个即时通讯的小demo

以下是一个从零开始创建 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,仅仅实现了发送和接收文本消息的功能。在实际应用中,你还需要考虑一些其他因素,例如网络连接状态、消息的处理和存储、用户权限管理等。

猜你喜欢

转载自blog.csdn.net/LegendaryChen/article/details/129066618