No announcement yet.

Websocket Arduino PHPoc shield as client

  • Filter
  • Time
  • Show
Clear All
new posts

  • Websocket Arduino PHPoc shield as client

    Hi, I would like to connect to a light console (MAlighting - MA2onPC) through a web remote page; normaly I can access that page writing the IP in the browser on PC or IPAD.
    I have already used "Web client" example in the library, and I can read the welcome page. after that I have to insert name and password, but I didn't found how to do that.
    Attached what arduino has read.

    Can anyone help me to understand what can I do, or where to find some info/tutorial?
    Thanks in advice

  • #2
    <!DOCTYPE html>
    <html manifest="ma2remote.appcache">
    <meta charset="utf-8"/>
    <title>MA Webremote</title>
    <link rel="stylesheet" type="text/css" href="./css/generic.css" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Cache-control" content="public">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
    <link rel="apple-touch-icon" href="images/appicon.png"/>
    <link rel="shortcut icon" href="images/appicon.png"/>
    <script type="text/javascript" src="./js/start.js"></script>

    <div class="main">
    <div class="header">
    <div class="header-left">
    <div class="header-left-top"></div>
    <div class="header-left-bottom"></div>
    <div class="header-right top-right-button">
    <div class="commandbutton">
    <div class="buttonContent">
    <div class="text content">Wheels</div>
    <embed data-rel="popup-window-sign" class="popupWindowSign" type="image/svg+xml" src="./images/popupWindowSign.svg"></embed>

    <div id="body" class="middle page-content">
    <div class="middle-inner page-content-inner">
    <div class="middle-left"></div>
    <div class="middle-center">
    <div class="middle-center-top page-top-buttons button-container"></div>
    <div class="middle-center-bottom">
    <div class="middle-center-bottom-inner main-content"></div>
    <div class="middle-right">
    <div class="wheel dimmer-wheel">
    <div class="commonWheelHolder wheelHolder">
    <div class="wheelStripe">
    <div class="wheelStripeInner"></div>
    <div class="vertical-controls hidden"></div>

    <div class="bottom footer"></div>

    <div id="disconnectedPanel">Disconnected from console</div>
    <div class="selectionOverlay"></div>

    <div class="debug"></div>

    <script type="text/javascript" src="./js/main.js"></script>



    • #3
      Hello there,
      Welcome to PHPoC forum.

      I am not sure I understand it well.
      Can you describe your application again?
      Are you trying to implement password protection for your web page, so that user and password are required to access the page, like Basic Authentication?

      Or you mean something else?
      Also, which PHPoC product and firmware version you are using?



      • #4
        Thank you
        First of all, I'm using a P4S-348 shiled for Arduino, with an Arduino Uno/Mega 2560.
        The firmware version of the P4S is 1.3.0, I'm trying to update to 1.5.0 but it lost the connection after the download, and restart the process
        UPDATE: current firmware verion 1.5.0

        I have a console for light (, I set IP ( for the network connection.
        Usually, I connect my Ipad through WiFi (connected to the console), I open the brower and in the url I insert the IP of the console.
        Now I can access to the web remote page of the console (picture 1)
        Than I have to insert name and password of my console-user (in a native page of the console, not like your Basic Authentication page).
        Next (if it is correct), I can access to the control page and than do stuff as if I were in front of it (picture 2).

        I would like to understand how can I insert name&passord, after that, understand how I can get/set info (simulating an user doing stuff).
        My idea is to create a mini console with physical sliders and button (connected to arduino board) to control button and slider in the web remote page

        I hope I explained myself
        Last edited by ominoc; 04-26-2021, 11:21 PM.


        • #5
          Hello again,

          Well, there may be a couple of ways to do what you are trying to do, but let's take one.

          You can use WebSocket connection so that the web server and the web browser can exchange data persistently.
          Web browser <--------> PHPoC Shield <--------> Arduino (web server stores username/password)
          (receives user interaction)

          The credential or any other data is defined and stored in Arduino program.
          The web files (.php, .js, .css) are uploaded to PHPoC Shield.
          When you interact with the web browser, e.g. enter form to set/get credentials, the browser will exchange data with the web server (Arduino).
          Arduino will handle it and update the credential data accordingly.

          The best way to understand things is to look at an example. You may refer to the Arduino projects below:
          Web Pattern Unlock:
          Remotely Open Door via Web with Pattern:

          Hope this helps.


          • #6
            I have already see this example, WebSocket connection is the way, but unfortunately I have to do the opposite
            the web file is already on the console (that is the server)
            Arduino replaces the user, so Arduino will be the client, that receive comand through button and slider, and convert it to Websocket connection

            It is possible?


            • #7
              Well, it may be a bit confused here.

              Aren't you going to make a standalone console with Arduino, in which you can control things via the web page hosted on Arduino and PHPoC Shield?
              If not, how should Arduino work in your application?
              For example, from where will it receive data, what is the expected action for Arduino after it receives the data?
              Does it receive command from physical button and slider connected to it? What data should it send afterwards? To whom?

              Can you explain again the role of the console, user, web browser, Arduino in your application, what will each one send/get, to/from whom?
              A drawing will be helpful.


              • #8
                Sorry, my mistake.

                I made a draw with the info about the system, and about my project.
                Light console as server, connected via wifi to an Arduino+P4S-348 as client
                When I power on my project:
                1) Arduno ask to server to connect into the session
                2) server (light console) asks arduino user+password
                3) arduino reply with it (previusly saved in the arduino by the user)
                4) If user/pwd are correct > server reply to arduino with some info like: led status/color, info to be written on the display, etc...
                5) From now user can move slider, press button or change encoder > arduino sends these changes to the server
                6) restart from point "4" until:
                - new changes from my project (encoder, button, slider change) or from the console (button/slider/touch screen changes)
                - Arduno logout from the session

                I hope this time I have explained myself
                Thank for your support!


                • #9
                  Hi there,

                  I think now I get what you said.
                  However, Arduino with PHPoC Shield can work as a WebSocket server, but not a WebSocket client. So we can't make it a client in the WebSocket connection with your console (server).

                  You probably have to look for a workaround solution.
                  If it is possible to use HTTP REST API, instead of WebSocket, then everything would be fine.
                  In that case, your console will serve as the HTTP server and Arduino with shield act as the HTTP client, and they exchange data via REST API.

                  It is okay for Arduino with the shield to work as the HTTP client. The question is, for your console, can it work as an HTTP server? Can you check if it supports HTTP REST API? Or any other protocols rather than WebSocket?