问为创建自定义Web聊天
EN

Stack Overflow用户

提问于 2022-08-16 16:04:02

回答 1查看 87关注 0票数 0

是否有关于如何创建自己的网络聊天的指南(我不想使用/自定义响应中的聊天)。我想从零开始使用Blazor或角，但我还没有找到一个好的指南，如何做到这一点。

botframework

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-18 23:21:21

据我所知，没有向导。

这也取决于你的意思。如果您想要构建实现类似Web的工具，那么我建议您在引用各自的SDK时安装不同的工具。

BotFramework-网络聊天令人印象深刻，但它的构建和功能也相当复杂。
虽然Botkit的Web客户机目前已被否决，但它将作为解决同一问题的不同视角。
Botkit的僵尸生成器-适配器-web通过webhooks和websocket与站点进行通信，从而提供了一种不同的方法。

无论如何，您需要有一个捕获传入消息以及回发消息的方法。这意味着您将需要使用BotFramework-DirectLineJS SDK，这正是BotFramework所依赖的。然后，您需要考虑如何处理不同的活动类型和可能由bot或用户发送的消息。例如，如何处理：

消息：
- 简单短信
- 带有附件的信息:卡片、自适应卡、图像、音频/语音等。
事件
ConversationUpdates，包括membersAdded
痕迹
打字

对于听力和视力受损等人来说，还有一些可访问性的考虑因素，还有许多其他需要考虑的问题。

这是我不久前创建的一个自定义聊天。它做的是绝对的基本，而且不漂亮。在它中，我调用本地令牌服务器来获取有效的Directline令牌。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <title>Custom Chat Using Direct Line</title>
  <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
  <script crossorigin="anonymous" integrity="sha384-7aeOL7r9BM1QyTIsoLYJYNsRLfVnQCtLmwgXlxteDNhJf0xUGj9PKP8F5w2Fx92/"
    src="https://unpkg.com/botframework-directlinejs@0.11.6/dist/directline.js"></script>
</head>

<body>
  <h2>Custom Chat Using Direct Line</h2>
  <div class="input-container">
    <input type="text" class="input-box" name="input-box" value="Hi">
    <button type="button" class="input-button">Send</button>
  </div>
  <div class="response-container">
  </div>
  <script type="text/babel" data-presets="es2015,react,stage-3">
    ( async function () {
      const { ConnectionStatus, DirectLine } = window.DirectLine;

      const renderStatus = {
        DISPLAY_ACTIVITIES: 'display',
        HIDE_ACTIVITIES: 'hide',
        RESET_VIEW: 'reset',
        MAINTAIN_VIEW: 'maintain'
      }

      let previousWatermark = 0;
      let currentWatermark = 0;
      let displayStatus = renderStatus.DISPLAY_ACTIVITIES;
      let viewStatus = renderStatus.MAINTAIN_VIEW;
      let responseHistory;

      // Custom 'token' server retrieves a Direct Line token
      // Server stores the Direct Line secret exchanging it for a token when requested
      const res = await fetch( 'http://localhost:3500/directline/conversations', { method: 'POST' } );
      const { token } = await res.json();

      var directLine = new DirectLine( {
        token: token
      } )
      
      // Function posts activity to Direct Line, when called
      const postActivity = ( dl, text ) => {
        dl.postActivity(
          {
            from: { id: 'abc123', name: 'JohnDoe' }, // required (from.name is optional)
            type: 'message',
            text: `${ text }`
          }
        )
          // As all message activities are logged below, there is no need to log the posted activity
          .subscribe(
            id => id,
            error => console.log( "Error posting activity", error )
          );
      }

      // Posts user message on button click
      const inputButton = document.querySelector( '.input-button' );
      const inputBox = document.querySelector( '.input-box' );

      inputButton.addEventListener( 'click', ( e ) => {
        e.preventDefault();
        const text = inputBox.value;
        postActivity( directLine, text );
      } );

      inputBox.onkeyup = ( e ) => {
        const keyCode = e ? ( e.which ? e.which : e.keyCode ) : event.keyCode;
        if ( keyCode === 13 ) {
          const text = inputBox.value;
          postActivity( directLine, text );
        }
      };

      // Updates UI with all response activity
      let responseContainer = document.querySelector( '.response-container' );

      const subscribeToActivities = (dl) => {
        dl.activity$
          .filter( activity => {
            return activity.type === 'message';
          } )
          .subscribe(
            activity => {
              const text = activity.text;

              if (!activity.attachments) {
                const id = activity.from.id;
                currentWatermark = Number(dl.watermark);
                
                if ( viewStatus === renderStatus.RESET_VIEW && currentWatermark <= previousWatermark && responseHistory.length > 0) {
                  displayStatus = renderStatus.HIDE_ACTIVITIES;
                  viewStatus = renderStatus.MAINTAIN_VIEW;
                } 
    
                else if ( displayStatus === renderStatus.DISPLAY_ACTIVITIES && currentWatermark >= previousWatermark ) {
    
                  switch ( id ) {
                    case 'botberg':
                      responseContainer.innerHTML += `<ul class="chat-list"><li>From Bot: ${ text } </li></ul>`;
                      displayStatus = renderStatus.HIDE_ACTIVITIES;
                      viewStatus = renderStatus.MAINTAIN_VIEW;
                      break;
                  }
                }
                else if ( displayStatus === renderStatus.HIDE_ACTIVITIES && currentWatermark >= previousWatermark ) {
                  switch ( id ) {
                    case 'botberg':
                      break;
                    default:
                      responseContainer.innerHTML += `<ul class="chat-list"><li>From User: ${ text } </li></ul>`;
                      displayStatus = renderStatus.DISPLAY_ACTIVITIES;
                      viewStatus = renderStatus.MAINTAIN_VIEW;
                  }
                }
              }
              else {
                responseContainer.innerHTML += `<ul class="chat-list"><li>From Bot: Client received unsuppported attachment type </li></ul>`;
              }
            }
          );
      }

      subscribeToActivities(directLine);

      directLine.connectionStatus$
        .subscribe( async connectionStatus => {
          switch ( connectionStatus ) {
            case ConnectionStatus.Uninitialized:
              console.log( 'CONNECTION_STATUS => UNINITIALIZED ', directLine );
              break;
            case ConnectionStatus.Connecting:
              console.log( 'CONNECTION_STATUS => CONNECTING ', directLine );
              break;
            case ConnectionStatus.Online:
              console.log( 'CONNECTION_STATUS => ONLINE ', directLine );
              break;
            case ConnectionStatus.ExpiredToken:
              console.log( 'CONNECTION_STATUS => EXPIRED TOKEN ', directLine );
              break;
            case ConnectionStatus.FailedToConnect:
              console.log( 'CONNECTION_STATUS => FAILED TO CONNECT ', directLine );
              break;
            case ConnectionStatus.Ended:
              console.log( 'CONNECTION_STATUS => ENDED ', directLine );
              break;
          }
        } );
    } )()

  </script>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73376995

复制

相似问题

问为创建自定义Web聊天
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为创建自定义Web聊天EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为创建自定义Web聊天
EN