<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JIM</title>
  <script src="./jim-[version].js"></script>
  <script src="./qiniu.min.js"></script>
  <style>
    .container {
      height: 200px;
      width: 600px;
      background-color: rgb(119, 128, 226);
      margin: 200px auto;
      font-size: 30px;
      font-weight: bold;
      border-radius: 10px;
      padding: 4rem;
      box-sizing: border-box;
    }

    .input {
      display: none;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>请打开浏览器控制台查看结果</div>
    <input type="file" id="file" class="input" />
    <div>
      <span id="percent">0</span>
      <span>%</span>
    </div>
  </div>
  <script>

    let fileNode = document.querySelector('#file');
    let percentNode = document.querySelector('#percent');

    // 准备基础信息
    let appkey = 'Your AppKey';
    let token = 'Your Token';
    let userId = '与 Token 对应的 userId' 
    // 私有化部署后的 WebSocket 域名或 IP
    let serverList = [
      'https://demo.im.com',
      'http://demo.im.com',
      'http://10.23.31.111:8080',
    ];

    /*
      初始化七牛文件存储
      let jim = JIM.init({ appkey, upload: qiniu });
    */

    /* 
      初始化阿里文件存储: OSS 通过引入阿里上传 JS SDK 获得 https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js
      let jim = JIM.init({ appkey, upload: OSS });
    */

    /* 
      初始化 AWS 文件存储: S3Client 通过引入 AWS JS SDK 获得 https://www.npmjs.com/package/@aws-sdk/client-s3
      import { S3Client } from "@aws-sdk/client-s3";
      let jim = JIM.init({ appkey, upload: S3Client });
    */

    //  步骤 1: 初始化 SDK, 全局只需初始化一次, 以七牛为例 
    let jim = JuggleIM.init({ appkey, serverList, upload: qiniu });
    let { Event, ConnectionState, ConversationType, MessageType } = JIM;

    // 步骤 2: 设置状态监听，全局只需设置一次
    jim.on(Event.STATE_CHANGED, ({ state, user }) => {
      if (ConnectionState.CONNECTING == state) {
        console.log('im is connecting');
      }
      if (ConnectionState.CONNECTED == state) {
        // user => { id: 'xxx' }
        console.log('im is connected', user);
      }
      if (ConnectionState.DISCONNECTED == state) {
        console.log('im is disconnected');
      }
    });

    // 步骤 3: 设置消息监听，全局只需设置一次
    jim.on(Event.MESSAGE_RECEIVED, (message) => {
      console.log(message);
    });

    // 步骤 4: 连接，全局只需调用一次，消息相关、会话相关接口必须连接成功后才可调用
    jim.connect({ token, userId }).then((user) => {
      fileNode.style = "display: block;";
      fileNode.onchange = sendFile
    }, (error) => {
      console.log(error)
    });

    function sendFile(e) {
      let file = e.target.files[0];
      let message = {
        conversationType: ConversationType.PRIVATE,
        conversationId: 'userid2',
        content: {
          file: file,
          name: file.name,
          type: file.type
        },
        /*
        自定义属性: 按需使用, 自定义属性会在文件上传进度 onprogress 和消息发送成功后 msg 对象中返回
        使用的场景: 发送文件消息时可自定义 tid，然后将消息渲染到页面，通过 onprogress 中返回的 
                  message.tid 更新进度条
        */
        tid: `tid_${Date.now()}`
      };

      jim.sendFileMessage(message, {
        onprogress: ({ percent, message }) => {
          console.log(`${percent}%`, message);
          percentNode.innerHTML = percent;
        }
      }).then((msg) => {
        console.log('send file message successfully', msg)
        e.value = '';
      }, (error) => {
        console.log(error)
      });
    }
  </script>
</body>
</html>