mirror of
https://github.com/ipfs/ipfs-blog.git
synced 2026-08-10 19:02:48 +02:00
Merge pull request #360 from ipfs/staging
IPFS News and connectivity walkthrough blog post
This commit is contained in:
emilymvaughan
@@ -176,6 +176,7 @@ pages:
|
||||
- src/_blog/introducing-the-browsers-3000-hackathon.md
|
||||
- src/_blog/ion-a-path-to-decentralized-identity.md
|
||||
- src/_blog/ipfs-at-ethdenver-2021.md
|
||||
- src/_blog/ipfs-browser-connectivity-walkthrough.md
|
||||
- src/_blog/ipfs-filecoin-and-content-persistence.md
|
||||
- src/_blog/ipfs-filecoin-chainlink-hackathon-winners.md
|
||||
- src/_blog/ipfs-in-brave-native-access-to-the-distributed-web.md
|
||||
@@ -243,5 +244,6 @@ pages:
|
||||
- src/_blog/welcome-to-ipfs-weekly-161.md
|
||||
- src/_blog/welcome-to-ipfs-weekly-162.md
|
||||
- src/_blog/welcome-to-ipfs-weekly-163.md
|
||||
- src/_blog/welcome-to-ipfs-weekly-164.md
|
||||
- src/_blog/what-is-ipld.md
|
||||
- src/_blog_zh/ipfs-136.md
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: IPFS Browser Connectivity Walkthrough
|
||||
description: A guide to a browser integration using IPFS to set up and run a basic
|
||||
chat interface.
|
||||
author: ''
|
||||
date: 2021-12-07
|
||||
permalink: "/2021-12-07-IPFS-Browser-Connectivity-Walkthrough"
|
||||
translationKey: ''
|
||||
header_image: "/144127481-634bdab9-2033-418b-8ed2-6ba3dc4e554b.png"
|
||||
tags:
|
||||
- tutorial
|
||||
|
||||
---
|
||||
_From HackFS: Ryan Baumann from IPFS walks through the basics of browser integration using IPFS. This talk was delivered at HackFS, a three-week virtual hackathon dedicated to building a censorship-free decentralized internet. The complete discussion is_ [_available here_](https://www.youtube.com/watch?v=xZiN9dLvMoU&list=PLXzKMXK2aHh5iq_crvYF76EmPsZgcgLki&index=3)_._
|
||||
|
||||
The future of the internet is the decentralized web, but getting there requires infrastructure. At the heart of this infrastructure is IPFS, the InterPlanetary File System. Together with its name resolution system INFS (Interplanetary Name System), it presents a new way to hold and distribute content to browsers known as [content addressing](https://blog.ipfs.io/2021-06-03-ipfs-filecoin-content-persistence/).
|
||||
|
||||
Under this paradigm, data can be retrieved from wherever it is stored across the IPFS network based on its unique content ID (CID). This improves over the current location-based infrastructure where data is retrieved from specific servers and can be vulnerable to all kinds of security risks.
|
||||
|
||||
What this means for the average app developer is that instead of hosting an app and its requisite data on a centralized server, they can now upload their app to IPFS and run it directly from a decentralized storage network. This post takes a look at developing web browser interconnectivity through IPFS by putting together a very basic chat interface.
|
||||
|
||||
<center><b>Watch on YouTube</b> <a href="https://www.youtube.com/watch?v=xZiN9dLvMoU&list=PLXzKMXK2aHh5iq_crvYF76EmPsZgcgLki&index=3">IPFS: Browser Connectivity Walkthrough</a></center>
|
||||
|
||||
The best way to stay up to date with this browser connectivity guide for a simple chat interface is in the IPFS [documentation](https://docs.ipfs.io/how-to/create-simple-chat-app/).
|
||||
|
||||
## Getting Started
|
||||
|
||||
This tutorial isn't advanced, and most developers will be familiar with what’s going on. The only difference is that this guide uses IPFS for the backend to connect to or discover other clients and chat with them.
|
||||
|
||||
Most web developers will already have a text editor of choice installed. The core elements for this tutorial can be accessed[ here](https://workshop.thedisco.zone/) and a completed demo can be accessed [here](https://github.com/TheDiscordian/browser-ipfs-chat).
|
||||
|
||||
This guide will focus on the chat.js file as what will be edited. To this end, the user should have the index.html opened in a browser to check on their progress during the tutorial.
|
||||
|
||||
If you want more detailed info about the connection, you can open the browser console and drop in the command await ipfs.id() to get it.
|
||||
|
||||
_Fig.1: The In-Browser Console_
|
||||
|
||||
## Step 1: Connecting to Peers
|
||||
|
||||
Peer connection is at the heart of this particular IPFS chat applet. Typically, when people connect to IPFS, we want to speak to them through chat. To do so, you can subscribe to a particular channel. All users subscribed to the same channel will get messages sent to it. But how can you connect to other people?
|
||||
|
||||
|
||||
|
||||
_Fig. 2: A Potential User Network Setup_
|
||||
|
||||
There are two ways to connect to others over IPFS. The first relies on WebRTCStar, which relies on the NAT to work. If, however, the NAT is down for whatever reason, there is a backup plan. In addition to WebRTCStar, you can organically discover others through the p2p circuit. To ensure that the connections resolve, you’ll have to cater to both possibilities.
|
||||
|
||||
At the top of the file, you’ll need to get the bootstrap constant and include it.
|
||||
|
||||
|
||||
_Fig. 3: The bootstrap Constant_
|
||||
|
||||
Next, you’ll attempt the connection; if the connection fails, it'll automatically retry. As a safeguard, you may want to ensure that you disconnect before retrying the connection.
|
||||
|
||||
|
||||
|
||||
_Fig. 4: The dobootstrap(reconnect)Function_
|
||||
|
||||
The next thing is to develop a processAnnounce() function, which you’ll use for subscribing to the public channel (pubsub). You will subscribe to a circuit called announcer and attach the processAnnounce() function to it. You’ll be storing your own ID for comparison, so you don't resend the messages you collect from yourself. It's important to keep sending keep-alive packets to the network since there is a tendency for the connection to drop if left dormant for too long.
|
||||
|
||||
|
||||
|
||||
_Fig. 5: The processAnnounce() Function Part I_
|
||||
|
||||
Once you collect the p2p circuit addresses, you’ll split them from the messages using a standard string split. You’ll get a list of peers from WebRTCStar as well since this is what you want to verify your connection. Next, you’ll attempt to connect twice. Typically, you perform the connection redundantly because the system rejects the first attempt, so a backup attempt is necessary to connect successfully.
|
||||
|
||||
|
||||
|
||||
_Fig. 6: The processAnnounce() Function Part II_
|
||||
|
||||
You can use the checkAlive() function to update your connection status and update it on the chat screen. You’ll also schedule a keep-alive packet to be sent every fifteen seconds to ensure you stay connected. Now that you’ve done the overhead for the connection, you can look at sending and receiving messages.
|
||||
|
||||
|
||||
|
||||
_Fig. 7: The checkAlive() Function_
|
||||
|
||||
We will then update the onload() function.
|
||||
|
||||
|
||||
|
||||
_Fig. 8: The Updated onload() Function_
|
||||
|
||||
## Step 2: Sending and Receiving Messages
|
||||
|
||||
You’ll be using two wrappers to interact with the chat system. We’ll be placing these below our bootstrap definitions, but above our dobootstrap(reconnect) function. The first is a standard joinChannel() function, using a string passed to the channel as a flag, allowing you to subscribe to a public channel and receive all sent messages from that channel. The sendmsg() (common m) function is used similarly, but you’ll be using it to send a strong message. Another function sendMsg() with a capital M is a higher-level function that allows you to collect input data from the text element and send it off. An out() function drops received messages into the chat.
|
||||
|
||||
|
||||
|
||||
_Fig. 9: Message Sending and Channel Joins_
|
||||
|
||||
## Additional Considerations
|
||||
|
||||
As is immediately apparent from inspecting the code, this system is developed to introduce what you can do on IPFS. However, it can serve as the basis for something more functional and robust. With a bit of effort, you can even include the ability to send emojis or even link to gifs within the chat. You can display embedded media as well. This tutorial doesn't encrypt any messages, but developers can add their own custom encryption if they see fit. All the messages are signed, allowing verification for messages, even if forwarded by a third party.
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Welcome to IPFS Weekly 164!
|
||||
description: Using IPFS within everyday browsers, plus clever demos and tools from
|
||||
the community and more.
|
||||
author: Emily Vaughan
|
||||
date: 2021-11-30
|
||||
permalink: "/weekly-164/"
|
||||
translationKey: ''
|
||||
header_image: "/ipfsnews.png"
|
||||
tags:
|
||||
- weekly
|
||||
|
||||
---
|
||||
|
||||
|
||||
## **Browser Connectivity Walkthrough**
|
||||
|
||||
If you’re a developer looking to take advantage of IPFS’s decentralized storage solutions be sure to learn how to run your apps directly from our network. From HackFS, check out a walkthrough on how to develop web browser interconnectivity through IPFS. In this post, get familiar with the steps of building a simple chat interface that leverages the network on the back end to connect to other clients and chat with them. [Video walkthrough is here](https://www.youtube.com/watch?v=xZiN9dLvMoU&list=PLXzKMXK2aHh5iq_crvYF76EmPsZgcgLki&index=4) — stay tuned for a written guide soon 👀
|
||||
|
||||
## **Brand New on IPFS**
|
||||
|
||||
1. From Twitter user @psychothan, a tool specifically for pinning all of your Tezos NFTs to your local IPFS node — [check out the thread](https://twitter.com/psychothan/status/1463856743063199749).
|
||||
2. IPFS and decentralized storage in action 💪 What happens when a site goes offline and decentralization kicks into action? [See for yourself.](https://twitter.com/momack28/status/1459196835134853123)
|
||||
3. From Web3Jam, “Intro to IPFS and Filecoin” from Discordian, Community Engineer at Protocol Labs. [Dive in and get familiar.](https://www.youtube.com/watch?v=wmuzky88xXs)
|
||||
4. Discord + IPFS? [Check out this brief demo](https://www.youtube.com/watch?v=f-7_tJrqdEk) of uploading a file to IPFS directly from a Discord channel.
|
||||
|
||||
## **Around the Ecosystem**
|
||||
|
||||
Today, Vivid Labs (formerly VideoCoin) announced the availability of VIVID Open, an open source NFT marketplace. Each NFT will be resiliently stored on nft.storage powered by IPFS and Filecoin. [**Learn more!**](https://medium.com/vivid-labs/introducing-vivid-open-open-source-nft-marketplace-14aca6f0f4a8)
|
||||
|
||||
India’s biggest Web3 hackathon is underway! BUIDL IT, presented by Polygon, is designed to promote Web3 development and talent in India. $100k in prizes will be distributed. The event lasts November 19 - December 12. [**Learn more, register,**](https://buidlit.polygon.technology/) and see how you can build.
|
||||
|
||||
Eager to stay on top of all the hackathon opportunities across the Protocol Labs ecosystem? [**The Filecoin and IPFS Hackathon**](https://hackathons.filecoin.io/) portal is the best way to stay on top of past, current, and upcoming events.
|
||||
|
||||
The Mona Gallery team just announced multiplayer and voice chat for all Mona spaces! [**Dive in and try it**](https://t.co/U82gjHVZBz?amp=1) for yourself.
|
||||
|
||||
The Retrieval Markets Demo Day wrapped up recently. Check out the presentation from [**Magmo and KEN Labs**](https://www.youtube.com/watch?v=rFvwi6v8R0I).
|
||||
|
||||
Are you in Helsinki for Slush? Join [**Fluence Labs**](https://doc.fluence.dev/docs/) and Protocol Labs tomorrow for an event that will deep dive into the latest research & tech insights from open source projects. Attend to hear talks on IPFS & Fluence, a Q&A, networking & more. [**Register now.**](https://www.eventbrite.com/e/web3-infrastructure-at-slush-fluence-ipfs-tickets-208074836437)
|
||||
|
||||
## Want to help build the new internet?
|
||||
|
||||
[**Head of Content**](https://jobs.lever.co/protocol/330b0744-ebea-4bc3-90de-e817b470b8cb): Protocol Labs is seeking a Head of Content to develop and execute effective content deliverables for our portfolio and ecosystem projects including Filecoin and IPFS. The ideal candidate is an exceptional writer with a proven experience in communicating blockchain and Web3 concepts to developers, non-developers, enterprises, and newcomers. **Protocol Labs**, Remote.
|
||||
|
||||
[**Fullstack Performance Engineer**](https://angel.co/company/powerloom/jobs/1687602-fullstack-platform-engineer-1-fse-1-remote): At PowerLoom, they are building a decentralized protocol that creates a trusted audit trail of information that is independently verifiable, replayable and ready to extract higher order insights and analytics from. If you are passionate about coding on Python, solving complex data storage and fingerprinting puzzles, and have already worked on open source projects and/or production scale code, please apply. **PowerLoom**, Remote.
|
||||
|
||||
[**ARG Software Engineer**](https://arg.protocol.ai/job-software-engineer): The Protocol Labs [**Application Research Group (ARG)**](https://arg.protocol.ai/) is seeking a proactive and autonomous builder that can draft a roadmap forward and execute with code. You will need to have both a passion for hands-on development of distributed systems as well as problem solving within a complex system. **Protocol Labs**, Remote.
|
||||
|
||||
[**Developer Relations**](https://boards.greenhouse.io/textileio/jobs/4075619004): Textile is seeking someone to run large-scale community projects. These include amplifying our grants program to fund community projects, curating governance groups where we bring community stakeholders into our technology planning, engaging with external teams like Gitcoin and EthDenver to support large-scale developer events, and giving technical presentations at events. This position also includes day-to-day engagement with our Slack group, helping to triage GitHub issues, hacking on demos, writing blog posts and technical guides, and more. We are looking for a self-directed leader who wants to build a developer community while staying hands on with technology. **Textile**, Remote.
|
||||
|
||||
[**Senior Software Engineer**](https://jobs.lever.co/protocol/3490e571-4d47-487e-a47f-b02f08668290): Distributed systems engineering lies at the center of many projects at Protocol Labs. With IPFS, libp2p, Filecoin, and other related projects, we are laying the foundation for a more resilient, more secure, distributed version of the web. This requires rigorous engineering from protocol design through all the phases of implementation. We strike a balance between pragmatism, deeply informed protocol design, and strict application of strong engineering principles. All of this happens in an environment defined by curiosity, passion, and a love for open source. **Protocol Labs**, Remote.
|
||||
|
||||
[**Fullstack Engineer**](https://boards.greenhouse.io/textileio/jobs/4017984004): Textile's web products and services are written primarily in Golang and TypeScript, and communicate with Textile's core gRPC services. You will own the end user experience and have full ownership over the product stack, from research and development to implementation and production monitoring. **Textile**, Remote.
|
||||
|
||||
[**Backend/API Engineer**](https://boards.greenhouse.io/textileio/jobs/4017981004): As a Backend/API Engineer, you will research, contribute to the product vision and help define the roadmap of multiple products. You will build and maintain features on the [**Textile Hub**](https://github.com/textileio/textile), and build new services and systems to integrate with blockchain networks including [**Threads**](https://github.com/textileio/go-threads), [**Buckets**](https://github.com/textileio/go-buckets), [**Hub**](https://github.com/textileio/textile), and [**Powergate**](https://github.com/textileio/powergate). This role is for someone with solid coding experience and the ability to lead new features. **Textile**, Remote.
|
||||
|
||||
[**Product Manager, Developer Experience**](https://jobs.lever.co/3box/68e3cf44-5ee8-4b2a-b872-bca815bf5caf): As a Product Manager on the Developer Experience team at 3Box Labs, you'll be in charge of delivering a best-in-class experience for developers building on the Ceramic platform. 3Box Labs created the leading identity and data solution for Web3, and alongside the open source developer community. They’re looking for impact-driven, intentional, and fast-learning teammates. **3Box Labs**, Remote.
|
||||
|
||||
[**Community Lead**](https://jobs.lever.co/3box/cac4d9b2-4822-4c91-99b8-16c5d3dd75b6): As a Community Lead at 3Box Labs, you’ll have the opportunity to create an incredibly engaged, welcoming, synergistic community around the technology and values that can help catalyze a global movement for a better web. 3Box Labs created the leading identity and data solution for Web3, and alongside the open source developer community. They’re looking for impact-driven, intentional, and fast-learning teammates. **3Box Labs**, Remote.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Reference in New Issue
Block a user