Simple read of a public textfile

ewingson · January 5, 2021, 1:57pm

I ve got code to open a websocket connection and want simply put out a public readable textfile on the webconsole. I’ ll attach the code, the sharing for test.txt and the console output so far. any help appreciated.

<!doctype html>
<!-- websocket test location https://www.serverproject.de/etc/solid/socket/test.html -->
<html>
<head><meta charset="utf-8"/></head>
<script>
  var socket = new WebSocket('wss://testpro.solidweb.org/', ['solid.0.1.0']);
  console.log("solidweb socket definition done", socket)
 
  socket.onopen = function() {
    this.send('sub https://testpro.solidweb.org/public/ctest/test.txt');
    console.log("solidweb socket sub sent", socket)
  };
 
  socket.onmessage = function(msg) {
    if (msg.data && msg.data.slice(0, 3) === 'pub') {
      console.log("solidweb message:",msg)
      // resource updated, refetch resource
    }
  };
  
  function display(msg){
    let url = msg.data.substring(4, msg.data.length)
    console.log(url)
    fetch(url)
   .then( r => r.text() )
   .then( t => console.log(t) )
      
   fetch(url, {
     headers: {"Content-type": "text/plain; charset=UTF-8"},
     method: 'GET'
   })
   .then(response => console.log(response.text()))
   .catch((error) => {
     console.error('Error:', error);
   });
  } 

//var text="";  
//display(text);

</script>
 
</html>

at David how do I call the functions in question ?

[edit] I’ ve played around with the brackets and don’ t know how function display is called…

Smag0 · January 5, 2021, 6:09pm

Hi @ewingson the call to the display () function is missing in the socket.on message see complete example here

github.com

scenaristeur/solid-client/blob/main/exploration/websocket/websocket.html

<html>
<!-- websocket test for https://gitlab.com/solidweb.org/support/-/issues/4 -->
<script>

  var socket = new WebSocket('wss://spoggy.solidweb.org/', ['solid.0.1.0']);
  console.log("solidweb socket", socket)
  socket.onopen = function() {
    this.send('sub https://spoggy.solidweb.org/public/websocket/test.txt');
    console.log("solidweb socket",socket)
  };

  var socket2 = new WebSocket('wss://spoggy-test7.solidcommunity.net/', ['solid.0.1.0']);
  console.log("solidcommunity socket", socket2)
  socket2.onopen = function() {
    this.send('sub https://spoggy-test7.solidcommunity.net/public/websocket/test.txt');
    console.log("solidcommunity socket", socket2)
  };

  var socket3 = new WebSocket('wss://spoggy.solidcommunity.net:8443', ['solid.0.1.0']);
  console.log("solidcommunity socket 8443 ", socket3)

This file has been truncated. show original

When the test.txt file is changed, the socket receive a ‘pub’ message, and the socket.onmessage is activated, the we launch the display function, remove the 4 first char to get the URL of the changed file, and then we run a fetch to that url, then we transform r, the response to text with .text() , then we console.log the result

Smag0 · January 5, 2021, 6:31pm

Here is how I’ve learned we socket, building a realtime chat https://socket.io/get-started/chat/
Then I’ve build a collaborative whiteboard https://github.com/scenaristeur/DessinCollaboratif

ewingson · January 5, 2021, 6:34pm

man, thanx a lot, now I’ ve got stuff to dive into. case questions I’ ll append them to this thread

ewingson · January 5, 2021, 6:48pm

I still havn’ t got it. lets begin as simple as possible. can I fire a GET and just output the content ? only read from the file ? a manual call of the function instead of on.change ? I’ m coming from procedural programming originally and still find it hard to follow the flow of javascript

[edit] die on change message konnte ich nachvollziehen. I could reproduce the on change message. learning success !!!

[edit2] started further exps https://github.com/ewingson/lib/blob/master/pub/socket/test.html

Smag0 · January 8, 2021, 8:53am

Did you succeed?

ewingson · January 8, 2021, 9:06am

no not yet … I’ m trying to do everything manual, so I can understand and reproduce whats going on. Login and write would be the second step. can I use a xmlhttprequest for a GET ?

[edit] or do you think I should do it the SOLID-way from the very beginning ? I’ m doing things manual and low-level with intention…

aveltens · January 8, 2021, 10:55am

I think it is good to know the underlying API.

Just use fetch:

fetch('https://angelo.veltens.org/public/')
  .then(response => response.text())
  .then(text => console.log(text))

If you want to create a resource (e.g. sending to my inbox below):

fetch('https://angelo.veltens.org/inbox/', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
  },
  body: 'Hello, Angelo!'
})

ewingson · January 8, 2021, 11:18am

read geht.

write gives 401.

now authentication (set everyone to editor of container .../public/ctest/

was ich weiss ist, dass man beim POST keinen filename mitgeben kann, das entscheidet der Server sonst muss man PUT oder PATCH nehmen, oder ?

[edit] habe mich mit solid-auth-client authentifiziert und ein WRITE geschafft.

Learning Success proceeds… wochenende !

Smag0 · January 8, 2021, 10:48pm

Could you please tell me what you really want to do, I thought you was focusing on websocket, but it’s a quite particular aspect of Solid with some event mechanisms between server and client for realtime.
If you want to build a solid app, here is the first step how I do it https://spoggy-test6.solidcommunity.net/public/blog/portfolio.html more step are written in french but I could translate if needed.
If you just want to read a file on a Pod, the best way is to use @jeffz solid-file-client https://github.com/jeff-zucker/solid-file-client/blob/master/docs/using-in-browser.md

Using solid-file-client in a browser

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- IMPORT SOLID-AUTH-CLIENT AND SOLID-FILE-CLIENT LIBRARIES
-->
<script src="https://cdn.jsdelivr.net/npm/solid-auth-client@2.3.0/dist-lib/solid-auth-client.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/solid-file-client@1.0.0/dist/window/solid-file-client.bundle.js"></script>

<script>
// INSTANTIATE AUTH AND FILE-CLIENT OBJECTS
//
    const auth = solid.auth
    const fc   = new SolidFileClient(auth)
    const someUrl = 'https://[url_you_want_to_read]'

// DEFINE A URI THAT CONTAINS A POPUP LOGIN SCREEN
//
    const popUri = 'https://solidcommunity.net/common/popup.html'

// USE THE AUTH OBJECT TO LOGIN AND CHECK THE SESSION
// USE THE FILE-CLIENT OBJECT TO READ AND WRITE
//
    async function run(){
        let session = await auth.currentSession()
        if (!session) { session = await auth.popupLogin({ popupUri:popUri }) }
        console.log(`Logged in as ${session.webId}.`)
        let content = await fc.readFile( someUrl )
        console.log(content)
    }

    run()
</script>
</head>
<body>
Take a look in the console
</body>
</html>

ewingson · January 9, 2021, 4:39am

hello @Smag0

I’ m on a Solid learning journey. I don’ t have a particular task to work through yet, I want to explore the read and write abilities. and I am trying to do on a single-page-level, because then I can best follow the code. I appreciate your help. if I stumble upon further probs, I will let you know. but your feedback has been very valuable. I have opened a socket and additional on-message, on-close and on-error functions. but because its asynchron, I couldnt close clean yet. its a follow-your-nose-trip. exploring the Solidoverse

Smag0 · January 9, 2021, 3:15pm

I don’t know how close is implemented server side, node-solid-server seems to us solid-ws you can find some tests here https://github.com/solid/node-solid-ws/blob/master/test/websockets.js

ewingson · January 11, 2021, 1:54pm

switched to solid-auth-client and managed to read a private peace of data at https://testpro.solidweb.org/public/ctest/login2/test.html

adventure · January 11, 2021, 4:17pm

I like it!