TeamSpeak Remote Apps

TeamSpeak Client
1

Since some people have had problems with the remote apps up to now, I wanted to show an example including the code.

Request an API Key:

{
  "type": "auth",
	"payload": {
				"identifier": "de.bytestore",
				"version": "0",
				"name": "Example",
				"description": "Description of your App.",
				"content": {
					"apiKey": ""
			}
  }
}

If you send this Request to your Client (WebSocket Server) than you should get following Response on Accept the Request:

{
   "payload":{
      "apiKey":"e4f1bc71-bd45-46fc-b523-b44fe5c4a2e7",
      "connections":[
         
      ],
      "currentConnectionId":0
   },
   "status":{
      "code":0,
      "message":"ok"
   },
   "type":"auth"
}

Now some Code examples:

// WebSocket Client Endpoint in JavaScript
 
var ws = new WebSocket("ws://localhost:5899");
 
// Event handler for the WebSocket connection opening
ws.onopen = (event) => {
   ws.send("connected")
};
 
// Event handler for receiving text messages
ws.onmessage = (event) => {
      console.log(event.data)
}
 
// Event handler for errors in the WebSocket object
ws.onerror = (err) => {
   console.log("Error ", err);
};
 
// Listen for the close connection event
 ws.onclose = (event) => {
   console.log("Disconnected: " + event.reason);
}
 
// Send the message
ws.send({
         "type": "auth",
         "payload": {
             "identifier": "de.teamspeak",
             "version": "0",
             "name": "DISPLAY NAME",
             "description": "Some description",
             "content": {
                 "apiKey": ""
           }
      }
});
 
ws.close();

Hotkeys in (5.0.0-beta55)
You now have your API Key and your Open Stream, lets start by the first Action wich was implemented at 02.06.2021 on the Beta Clients.

You can simply create your “own” Button by following Request:

{
   "type":"buttonPress",
   "payload":{
      "button":"de.bytestore.key1",
      "state":true
   }
}

de.bytestore can be your Application identification.
key1 can be your Key identification.

For setting up now your custom Keybind, you can Navigate into your Settings and as you set a normal Keybind you can setup your Key via the Remote App in following Steps:

image
image1289Ă—225 6.35 KB

YOU SHOULD EXECUTE THE REQUEST TWICE (Like a real Button):

  1. Button Enable
  2. Button Disable

Other Examples, will follow if TeamSpeak publish more Information.

Best Regards
Jan

6 Likes
3

Hey there! Nice writeup.
I have written a library in go that supports (ATM) sending the auth-event and the buttonPress-event …
and receiving much more (auth, clientSelfPropertyUpdated, clientPropertiesUpdated, connectStatusChanged, channelsSubscribed, clientMoved, channelPropertiesUpdated, clientChannelGroupChanged, channels, groupInfo, permissionList, serverPropertiesUpdated, neededPermissions, buttonPress).

That are all the events I could find during development. If you encounter different ones please send payloads and names :slight_smile:

btw… contributions are welcome!

3 Likes
4

When I run that script I get like
WebSocket connection to 'ws://localhost:5899/' failed: WebSocket is closed before the connection is established.
TeamSpeak 5 is open and running with the Remote App being enabled
Do you guys have any idea what’s wrong?

1 Like
5 
You have to wait till the connection ist established, 
after this you can send your message.

Maybe like this:

	ws.onopen = (event) => {
	  ws.send({
		"type": "auth",
		"payload": {
			"identifier": "net.example",
			"version": "1.0.0",
			"name": "example Application",
			"description": "An example application that does things",
			"content": {
				"apiKey": ""
			}
		}
	});

But I prefer the built-in query from the program “Postman” is easier to start with

image

2 Likes
6

Look here is what i got now

// WebSocket Client Endpoint in JavaScript

import WebSocket from 'ws';

var ws = new WebSocket("ws://localhost:5899");

// Event handler for the WebSocket connection opening

ws.onopen = (event) => {

   ws.send("connected")

   // Send the message

   ws.send({

      "type": "auth",

      "payload": {

         "identifier": "POQDavid.TESTSCRIPT",

         "version": "0",

         "name": "TESTSCRIPT",

         "description": "Some description",

         "content": {

            "apiKey": ""

         }

      }

   });

   //ws.close();

};

// Event handler for receiving text messages

ws.onmessage = (event) => {

   console.log(event.data)

}

// Event handler for errors in the WebSocket object

ws.onerror = (err) => {

   console.log("Error ", err);

};

// Listen for the close connection event

ws.onclose = (event) => {

   console.log("Disconnected: " + event.reason);

}

and with that I still get jswebsocketerror (github.com)
also I tested websocket with C# and I get 'The remote party closed the WebSocket connection without completing the close handshake.

1 Like
7

Is there any way I can see if the TeamSpeak5 Client is receiving my connection? i mean like a console

1 Like
8

u will see a request right here:
image

1 Like
9

Oh, awesome and just got that notification :slight_smile: ty

1 Like
10

I can connect to the websocket and the console on firefox tells me, that i’m connected but I never get a request in the teamspeak app. What I’m doing wrong?

var teamspeakWebsocket = new WebSocket("ws://localhost:5899")
teamspeakWebsocket.onopen = (event) => {
	console.log("Connected:")
	console.log(event)
	teamspeakWebsocket.send("connected")
	teamspeakWebsocket.send({
		"type": "auth",
		"payload": {
			"identifier": "com.berofa.teamspeak",
			"version": "1.0.0",
			"name": "StreamDeck TeamSpeak 5 Integration",
			"description": "Enable Websocket connection to StreamDeck.",
			"content": {
				"apiKey": ""
			}
		}
	})
};

teamspeakWebsocket.onmessage = (event) => {
	console.log(event)
}

teamspeakWebsocket.onerror = (err) => {
	console.log("Error ", err)
};

teamspeakWebsocket.onclose = (event) => {
	console.log("Disconnected:")
	console.log(event)
}

Console output:

Connected: 
open { target: WebSocket, isTrusted: true, srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }

Remote Apps is enabled in the teamspek app and the port is set to 5899 (default)…

TS Version: 5.0.0-beta70 Windows 11
I’ve allready reinstalled teamspeak but that did not solve the problem.

1 Like
11

I had the same problem with the websocket not connecting properly. My solution was to put a JSON.stringify() around the JSON object.

teamspeakWebsocket.send(JSON.stringify({
		"type": "auth",
		"payload": {
			"identifier": "com.berofa.teamspeak",
			"version": "1.0.0",
			"name": "StreamDeck TeamSpeak 5 Integration",
			"description": "Enable Websocket connection to StreamDeck.",
			"content": {
				"apiKey": ""
			}
		}
	}));
};
1 Like
12

I have created a small project using the remote app feature.
It currently serves as an example project to play around with the remote apps. I thought others might be able to pull very simple examples from it, and I’m posting it here.

However, the most interesting part for an example would be the “js/app.js” file:
https://github.com/DerTyp876/ts5-obs-overlay/blob/master/js/app.js

3 Likes
13

Hey guys can someone explain to me how this works with the button calls check it not really

1 Like