时间戳

首页 > 解决方案 > SignalR - connection.start 失败

javascript - SignalR - connection.start 失败

问题描述

我尝试从Anthony Chu运行教程。 https://www.youtube.com/watch?v=4d0wor7uAgQ

他使用 Azure CosmosDB、Azure Functions 和 SignalR 实现了一个“SimpleChat-Application”。您可以在其中实时在客户端之间发送消息。我尝试了不同的设置和版本，但我无法让它工作。

我的“index.html”中的源代码：（JavaScript）

  <script src="https://unpkg.com/@aspnet/signalr@1.0.0-rc1-final/dist/browser/signalr.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
  <script>
    const apiBaseUrl = 'http://localhost:7071';
    const hubName = 'chat';
    getConnectionInfo().then(info => {      
      let username;
      while (!username && username !== null) {
        username = prompt('Enter a username');
      }
      console.log(info.accessTokenFactory);
      if (username === null) return;
      document.body.classList.add('ready');
      const messageForm = document.getElementById('message-form');
      const messageBox = document.getElementById('message-box');
      const messages = document.getElementById('messages');
      const options = {
        accessTokenFactory: () => info.accessKey
      };

      const connection = new signalR.HubConnectionBuilder()
        .withUrl(info.url, options)
        .configureLogging(signalR.LogLevel.Trace)
        .build();

      connection.onclose(() => console.log('disconnected'));

      console.log('retrieving messages');

      getMessage().then(messages => {
        for(let m of messages) {
          newMessage(m);
        }
        console.log('connecting...');
        connection.start()
          .then(() => console.log('connected!'))
          .catch(console.error);
      });
      console.log('connected after');
    }).catch(alert);
    
    function getConnectionInfo() {
      console.log("test");
      return axios.post(`${apiBaseUrl}/api/negotiate`)
        .then(resp => resp.data);
    }

    function getMessage(sender, messageText) {
      return axios.get(`${apiBaseUrl}/api/getmessage`).then(resp => resp.data);
    }

    function newMessage(message) {
      const newMessage = document.createElement('li');
      newMessage.appendChild(document.createTextNode(`${message.sender}: ${message.text}`));
      messages.prepend(newMessage);
    }
  </script>

源代码（协商-function.json）

{
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    },
    {
      "type": "signalRConnectionInfo",
      "name": "connectionInfo",
      "hubName": "chat",
      "connectionStringSetting": "AzureSignalRConnectionString", 
      "direction": "in"
    }
  ]
}

源代码（协商 - index.js）

module.exports = function (context, req, connectionInfo) {
    context.res = { body: connectionInfo };
    context.done();
}

我可以从 cosmosDB 接收数据，但是当我使用 connection.start() 方法时......它没有连接到服务？！

有谁能够帮助我？

非常感谢！！！

版本：

（“我：你好”是 CosmosDB 中的一个条目）

带有控制台日志的结果页面

标签： javascriptazuresignalrazure-functions

解决方案

请注意这部分代码...

      const options = {
        accessTokenFactory: () => info.accessKey
      };

      const connection = new signalR.HubConnectionBuilder()
        .withUrl(info.url, options)
        .configureLogging(signalR.LogLevel.Trace)
        .build();

改变

=> info.accessKey

并插入

=> info.accessToken

由于未定义的值，连接失败！

推荐阅读