first commit

.cruft.json

@@ -0,0 +1,20 @@
+{
+  "template": "https://github.com/blackary/cookiecutter-streamlit-component/",
+  "commit": "c972054b7b0890a1aa1c02e792bedc71c525ea87",
+  "checkout": null,
+  "context": {
+    "cookiecutter": {
+      "author_name": "Muhammad Kamran",
+      "author_email": "mkrnaqeebi@gmail.com",
+      "project_name": "Streamlit Component Socket Client",
+      "package_name": "streamlit-component-socket-client",
+      "import_name": "streamlit_component_socket_client",
+      "description": "socket client which allow you to use and render session tate with out to wait for socket.",
+      "deployment_via_github_actions": "y",
+      "working_with_dataframes": "n",
+      "open_source_license": "MIT license",
+      "_template": "https://github.com/blackary/cookiecutter-streamlit-component/"
+    }
+  },
+  "directory": null
+}

.github/workflows/publish_PYPI_each_tag.yml

@@ -0,0 +1,33 @@
+
+# This workflows will upload a Python Package using Twine when a release is created
+# For more information see: https://help.github.com/en/actions/language-and-framework-guides/using-python-with-github-actions#publishing-to-package-registries
+
+name: Upload Python Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: "3.x"
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install setuptools wheel twine
+      - name: Build and publish
+        env:
+          TWINE_USERNAME: ${{ secrets.PYPI_USERNAME }}
+          TWINE_PASSWORD: ${{ secrets.PYPI_PASSWORD }}
+        run: |
+          pwd
+          python setup.py sdist bdist_wheel
+          twine upload dist/*
+

.gitignore

@@ -0,0 +1,109 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# OSX useful to ignore
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env/
+venv/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+
+# Sphinx documentation
+docs/_build/
+
+# IntelliJ Idea family of suites
+.idea
+*.iml
+## File-based project format:
+*.ipr
+*.iws
+## mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# PyBuilder
+target/
+
+# Cookiecutter
+output/
+python_boilerplate/
+cookiecutter-pypackage-env/
+
+# IDE settings
+.vscode/
+
+# direnv
+.envrc
+.direnv/
+
+# streamlit
+.streamlit/secrets.toml

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2023, Muhammad Kamran
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

MANIFEST.in

@@ -0,0 +1,3 @@
+recursive-include src/streamlit_component_socket_client/frontend *
+include README.md
+include LICENSE

README.md

@@ -0,0 +1,20 @@
+# streamlit-component-socket-client
+
+socket client which allow you to use and render session tate with out to wait for socket.
+
+## Installation instructions 
+
+```sh
+pip install streamlit-component-socket-client
+```
+
+## Usage instructions
+
+```python
+import streamlit as st
+
+from streamlit_component_socket_client import streamlit_component_socket_client
+
+value = streamlit_component_socket_client()
+
+st.write(value)

requirements.txt

@@ -0,0 +1 @@
+streamlit

setup.py

@@ -0,0 +1,22 @@
+from pathlib import Path
+
+import setuptools
+
+this_directory = Path(__file__).parent
+long_description = (this_directory / "README.md").read_text()
+
+setuptools.setup(
+    name="streamlit-component-socket-client",
+    version="0.1.0",
+    author="Muhammad Kamran",
+    author_email="mkrnaqeebi@gmail.com",
+    description="socket client which allow you to use and render session tate with out to wait for socket.",
+    long_description=long_description,
+    long_description_content_type="text/markdown",
+    packages=setuptools.find_packages(where="src"),
+    package_dir={"": "src"},
+    include_package_data=True,
+    classifiers=[],
+    python_requires=">=3.7",
+    install_requires=["streamlit>=1.2", "jinja2"],
+)

src/streamlit_component_socket_client/__init__.py

@@ -0,0 +1,38 @@
+from pathlib import Path
+from typing import Optional
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+# Tell streamlit that there is a component called streamlit_component_socket_client,
+# and that the code to display that component is in the "frontend" folder
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+	"streamlit_component_socket_client", path=str(frontend_dir)
+)
+
+# Create the python function that will be called
+def streamlit_component_socket_client(
+    key: Optional[str] = None,
+    url: str = "http://localhost:5000",
+    message: str = "Hello World!",
+):
+    """
+    Add a descriptive docstring
+    """
+    component_value = _component_func(
+        key=key, url=url, message=message
+    )
+    return component_value
+
+
+def main():
+    st.write("## Example")
+    value = streamlit_component_socket_client(
+        url="http://139.177.201.45:5000", message="phone in water"
+    )
+    st.write(value)
+
+
+if __name__ == "__main__":
+    main()

src/streamlit_component_socket_client/frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>streamlit-component-socket-client</title>
+    <script src="./streamlit-component-lib.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
+    <script src="./main.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/streamlit_component_socket_client/frontend/main.js

@@ -0,0 +1,50 @@
+// The `Streamlit` object exists because our html file includes
+// `streamlit-component-lib.js`.
+// If you get an error about "Streamlit" not being defined, that
+// means you're missing that file.
+
+function sendValue(value) {
+  Streamlit.setComponentValue(value)
+}
+
+/**
+ * The component's render function. This will be called immediately after
+ * the component is initially loaded, and then again every time the
+ * component gets new data from Python.
+ */
+function onRender(event) {
+  // Only run the render code the first time the component is loaded.
+  if (!window.rendered) {
+    const {url, message} = event.detail.args
+    console.log(url, message)
+    // connect to the websocket
+    var socket = io(url,
+      {
+        withCredentials: true,
+        extraHeaders: {
+          "my-custom-header": "abcd"
+        }
+      });
+    socket.on('connect', function() {
+        console.log('connected');
+        socket.emit('message', message);
+    });
+    socket.on('response', function(response) {
+        console.log('response', response);
+        sendValue({'response': response});
+    });
+    // You most likely want to get the data passed in like this
+    // const {input1, input2, input3} = event.detail.args
+
+    // You'll most likely want to pass some data back to Python like this
+    // sendValue({output1: "foo", output2: "bar"})
+    window.rendered = true
+  }
+}
+
+// Render the component whenever python send a "render event"
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
+// Tell Streamlit that the component is ready to receive events
+Streamlit.setComponentReady()
+// Render with the correct height, if this is a fixed-height component
+Streamlit.setFrameHeight(0)

src/streamlit_component_socket_client/frontend/streamlit-component-lib.js

@@ -0,0 +1,34 @@
+
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+  console.log(type, data)
+  const outData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+  }, data);
+  window.parent.postMessage(outData, "*");
+}
+
+const Streamlit = {
+  setComponentReady: function() {
+      sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+  },
+  setFrameHeight: function(height) {
+      sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+  },
+  setComponentValue: function(value) {
+      sendMessageToStreamlitClient("streamlit:setComponentValue", {value: value});
+  },
+  RENDER_EVENT: "streamlit:render",
+  events: {
+      addEventListener: function(type, callback) {
+          window.addEventListener("message", function(event) {
+              if (event.data.type === type) {
+                  event.detail = event.data
+                  callback(event);
+              }
+          });
+      }
+  }
+}