无法将带有 web3js 的客户端应用程序连接到元掩码

如何解决无法将带有 web3js 的客户端应用程序连接到元掩码

我是 dapp 初学者。这是一个 todolist 的演示应用程序 我无法在 web3js 中连接到区块链。 Websocket 连接错误

• 本地主机是 本地主机:8545
• 使用 web3js CDN：https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js

这是我的 app.js

App = {
  loading: false,contracts: {},load: async () => {
    console.log('app loading ...')
    console.log(web3);
    await App.loadWeb3()
    await App.loadAccount()
    // await App.loadContract()
    // await App.render()
  },// https://medium.com/Metamask/https-medium-com-Metamask-breaking-change-injecting-web3-7722797916a8
  loadWeb3: async () => {
    let web3 = new Web3('ws://localhost:8545');
    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider
      web3.setProvider('ws://localhost:8546');
      web3.eth.getAccounts().then(console.log);
    } else {
      window.alert("Please connect to Metamask.")
    }
    // Modern dapp browsers...
    if (window.ethereum) {
      window.web3 = new Web3(ethereum)
      try {
        // Request account access if needed
        await ethereum.enable()
        // Acccounts Now exposed
        web3.eth.sendTransaction({/* ... */})
        console.log('MetaMask is installed!');
      } catch (error) {
        // User denied account access...
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
      App.web3Provider = web3.currentProvider
      window.web3 = new Web3(web3.currentProvider)
      // Acccounts always exposed
      web3.eth.sendTransaction({/* ... */})
    }
    // Non-dapp browsers...
    else {
      console.log('Non-Ethereum browser detected. You should consider trying MetaMask!')
    }
  },loadAccount: async () => {
    // Set the current blockchain account
    App.account = web3.eth.accounts[0]
    console.log(App.account) 
    // web3 set up by loadWeb3,includes all accounts,loading first one via MetaMask
  },loadContract: async () => {
    // Create a JavaScript version of the smart contract
    const todoList = await $.getJSON('TodoList.json')
    App.contracts.TodoList = TruffleContract(todoList)
    App.contracts.TodoList.setProvider(App.web3Provider)

    // Hydrate the smart contract with values from the blockchain
    App.todoList = await App.contracts.TodoList.deployed()
  },render: async () => {
    // Prevent double render
    if (App.loading) {
      return
    }

    // Update app loading state
    App.setLoading(true)

    // Render Account
    $('#account').html(App.account)

    // Render Tasks
    await App.renderTasks()

    // Update loading state
    App.setLoading(false)
  },renderTasks: async () => {
    // Load the total task count from the blockchain
    const taskCount = await App.todoList.taskCount()
    const $taskTemplate = $('.taskTemplate')

    // Render out each task with a new task template
    for (var i = 1; i <= taskCount; i++) {
      // Fetch the task data from the blockchain
      const task = await App.todoList.tasks(i)
      const taskId = task[0].toNumber()
      const taskContent = task[1]
      const taskCompleted = task[2]

      // Create the html for the task
      const $newTaskTemplate = $taskTemplate.clone()
      $newTaskTemplate.find('.content').html(taskContent)
      $newTaskTemplate.find('input')
                      .prop('name',taskId)
                      .prop('checked',taskCompleted)
                      .on('click',App.toggleCompleted)

      // Put the task in the correct list
      if (taskCompleted) {
        $('#completedTaskList').append($newTaskTemplate)
      } else {
        $('#taskList').append($newTaskTemplate)
      }

      // Show the task
      $newTaskTemplate.show()
    }
  },createTask: async () => {
    App.setLoading(true)
    const content = $('#newTask').val()
    await App.todoList.createTask(content)
    window.location.reload()
  },toggleCompleted: async (e) => {
    App.setLoading(true)
    const taskId = e.target.name
    await App.todoList.toggleCompleted(taskId)
    window.location.reload()
  },setLoading: (boolean) => {
    App.loading = boolean
    const loader = $('#loader')
    const content = $('#content')
    if (boolean) {
      loader.show()
      content.hide()
    } else {
      loader.hide()
      content.show()
    }
  }
}

$(() => {
  $(window).load(() => {
    App.load()
  })
})

我在控制台中收到此错误：

我还是个新手，感谢您的帮助。 任何信息来源都没有帮助

解决方法

嘿，在 metamask update 之后，它不再注入 web3 。 您可以查看下面的博客，它展示了如何将 metamask 与我们的项目连接。

https://dapp-world.com/blogs/01/how-to-connect-metamask-with-dapp--1616927367052

唯一的问题是它的网络应用程序，您可以将它与您的项目相关联。 希望它有效！