samukasmk/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Soketi - Simple usage samples

Soketi is used as a websocket server to handle notifications from backend in this simple case python to frontend. Using websocket protocol.
This simple gist explain how to use it in practice.
1. Define files bellow


compose.yaml: to run socketi server using docker compose
webpage.html: the HTML page with JS code to bind socketi events
send_soketi_event.py: the python script to send socketi events to socketi server that will be arrived in webpage.html

2. create soketi server

docker compose up
[+] Running 2/2
 ✔ Network soketi_default  Created                                                                                                                                                                                                                                   0.0s 
 ✔ Container soketi        Created                                                                                                                                                                                                                                   0.0s 
Attaching to soketi
soketi  | 
soketi  |   🕵️‍♂️ Initiating metrics endpoints...  
soketi  | 
soketi  |    🎉 Server is up and running!   
soketi  |    📡 The Websockets server is available at 127.0.0.1:6001   
soketi  |    🔗 The HTTP API server is available at http://127.0.0.1:6001   
soketi  |    🎊 The /usage endpoint is available on port 9601.   
soketi  | 

3. open webpage.html in your browser

In my case as I'm in Linux and I have firefox:
firefox webpage.html

4. install python dependencies

pip install pusher

5. send soketi events from python script to webpage loaed in browser

python send send_soketi_event.py

python send send_soketi_event.py

python send send_soketi_event.py

Results

Sendind messages:


Received events:


## compose.yaml
services:
  soketi:
    image: quay.io/soketi/soketi:latest-16-alpine
    container_name: soketi
    restart: unless-stopped
    environment:
      # credenciais do app (as mesmas do HTML e do Python)
      SOKETI_DEFAULT_APP_ID: "123456"
      SOKETI_DEFAULT_APP_KEY: "app-key"
      SOKETI_DEFAULT_APP_SECRET: "app-secret"
      SOKETI_DEFAULT_APP_NAME: "chat-app"

      # porta onde o soketi vai ouvir websocket/pusher
      SOKETI_SERVER_PORT: "6001"

      # como vamos chamar direto por ws://127.0.0.1:6001 no HTML
      SOKETI_METRICS_ENABLED: "false"
      # se quiser ver logs mais verbosos:
      # SOKETI_DEBUG: "1"

      # desabilita TLS interno do soketi (vamos usar ws e não wss)
      SOKETI_SERVER_USE_TLS: "false"

      # garante compatibilidade pusher
      SOKETI_DEFAULT_APP_ENABLE_CLIENT_MESSAGES: "true"
      SOKETI_DEFAULT_APP_ENABLE_STATS: "true"
    ports:
      - "6001:6001"

## send_soketi_event.py
import pusher

# connect in soketi server
pusher_client = pusher.Pusher(
    app_id='123456',
    key='app-key',
    secret='app-secret',
    host='127.0.0.1',
    port=6001,
    ssl=False,
    cluster='mt1',
)

# payload with structure of HTML webpage expects
data = {
    "sender": "python-bot",
    "content": "Hello from Python via soketi!",
}

# send event
pusher_client.trigger('chat-room', 'message', data)

# notify in console
print("Soketi event [message]: sent - okay")

## webpage.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Soketi – Event listener (chat-room)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
  <h1>Event listener (chat-room)</h1>
  <p>
    This page connects in soketi server: <code>ws://127.0.0.1:6001</code> and start
    to listen the channel <code>chat-room</code> by the event <code>message</code>.
  </p>

  <!-- SDK Pusher -->
  <script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>

  <script>
    // same data from docker and Python
    const APP_ID  = '123456';
    const APP_KEY = 'app-key';

    // Let pusher show logs on console
    Pusher.logToConsole = true;

    const pusher = new Pusher(APP_KEY, {
      wsHost: '127.0.0.1',  // this is the address of your local machine
      httpHost: '127.0.0.1',
      wsPort: 6001,
      wssPort: 6001,
      forceTLS: false,      // disabling TLS
      encrypted: false,     // to work without TLS (only for development envs)
      disableStats: true,
      enabledTransports: ['ws', 'wss'], // try `ws` first
      cluster: 'mt1',
      authEndpoint: '/pusher/auth',
    });

    const channel = pusher.subscribe('chat-room');

    channel.bind('pusher:subscription_succeeded', () => {
      console.log('✅ Subscribed in the channel: chat-room');
    });

    channel.bind('message', (message) => {
      console.log('📨 message:', message);
      alert(`${message.sender} says: ${message.content}`);
    });

    pusher.connection.bind('state_change', (states) => {
      console.log('state:', states.previous, '→', states.current);
    });

    pusher.connection.bind('error', (err) => {
      console.error('connection error:', err);
    });

    console.log('Webpage full loaded in DOM.');
  </script>
</body>
</html>
	services:
	soketi:
	image: quay.io/soketi/soketi:latest-16-alpine
	container_name: soketi
	restart: unless-stopped
	environment:
	# credenciais do app (as mesmas do HTML e do Python)
	SOKETI_DEFAULT_APP_ID: "123456"
	SOKETI_DEFAULT_APP_KEY: "app-key"
	SOKETI_DEFAULT_APP_SECRET: "app-secret"
	SOKETI_DEFAULT_APP_NAME: "chat-app"

	# porta onde o soketi vai ouvir websocket/pusher
	SOKETI_SERVER_PORT: "6001"

	# como vamos chamar direto por ws://127.0.0.1:6001 no HTML
	SOKETI_METRICS_ENABLED: "false"
	# se quiser ver logs mais verbosos:
	# SOKETI_DEBUG: "1"

	# desabilita TLS interno do soketi (vamos usar ws e não wss)
	SOKETI_SERVER_USE_TLS: "false"

	# garante compatibilidade pusher
	SOKETI_DEFAULT_APP_ENABLE_CLIENT_MESSAGES: "true"
	SOKETI_DEFAULT_APP_ENABLE_STATS: "true"
	ports:
	- "6001:6001"
	import pusher

	# connect in soketi server
	pusher_client = pusher.Pusher(
	app_id='123456',
	key='app-key',
	secret='app-secret',
	host='127.0.0.1',
	port=6001,
	ssl=False,
	cluster='mt1',
	)

	# payload with structure of HTML webpage expects
	data = {
	"sender": "python-bot",
	"content": "Hello from Python via soketi!",
	}

	# send event
	pusher_client.trigger('chat-room', 'message', data)

	# notify in console
	print("Soketi event [message]: sent - okay")
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8" />
	<title>Soketi – Event listener (chat-room)</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
	<h1>Event listener (chat-room)</h1>
	<p>
	This page connects in soketi server: <code>ws://127.0.0.1:6001</code> and start
	to listen the channel <code>chat-room</code> by the event <code>message</code>.
	</p>

	<!-- SDK Pusher -->
	<script src="https://js.pusher.com/8.4.0/pusher.min.js"></script>

	<script>
	// same data from docker and Python
	const APP_ID = '123456';
	const APP_KEY = 'app-key';

	// Let pusher show logs on console
	Pusher.logToConsole = true;

	const pusher = new Pusher(APP_KEY, {
	wsHost: '127.0.0.1', // this is the address of your local machine
	httpHost: '127.0.0.1',
	wsPort: 6001,
	wssPort: 6001,
	forceTLS: false, // disabling TLS
	encrypted: false, // to work without TLS (only for development envs)
	disableStats: true,
	enabledTransports: ['ws', 'wss'], // try `ws` first
	cluster: 'mt1',
	authEndpoint: '/pusher/auth',
	});

	const channel = pusher.subscribe('chat-room');

	channel.bind('pusher:subscription_succeeded', () => {
	console.log('✅ Subscribed in the channel: chat-room');
	});

	channel.bind('message', (message) => {
	console.log('📨 message:', message);
	alert(`${message.sender} says: ${message.content}`);
	});

	pusher.connection.bind('state_change', (states) => {
	console.log('state:', states.previous, '→', states.current);
	});

	pusher.connection.bind('error', (err) => {
	console.error('connection error:', err);
	});

	console.log('Webpage full loaded in DOM.');
	</script>
	</body>
	</html>