Is websockets enabled in your tyk.conf?
https://github.com/TykTechnologies/tyk/blob/master/install/data/tyk.self_contained.conf#L64
I think the issue you might have had was CORS, since you must get Tyk to manage that for you…
Running a simple test, this works locally:
testwww/index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">
var wsUri = "ws://10.0.75.2:8181/ws/";
var output;
function init()
{
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket()
{
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt)
{
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onClose(evt)
{
writeToScreen("DISCONNECTED");
}
function onMessage(evt)
{
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
websocket.close();
}
function onError(evt)
{
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message)
{
writeToScreen("SENT: " + message);
websocket.send(message);
}
function writeToScreen(message)
{
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id="output"></div>
Run this somewhere with:
cd testwww
python -m SimpleHTTPServer 8000
API Definition:
{
"id": "58ca20ded95a9b01650f661c",
"name": "ws",
"slug": "ws",
"api_id": "271f8325a5054e5c4ae713bf5bf1cc9e",
"org_id": "589a2058c2e9f9018bad03aa",
"use_keyless": true,
"use_oauth2": false,
"use_openid": false,
"openid_options": {
"providers": [],
"segregate_by_client": false
},
"oauth_meta": {
"allowed_access_types": [],
"allowed_authorize_types": [],
"auth_login_redirect": ""
},
"auth": {
"use_param": false,
"param_name": "",
"use_cookie": false,
"cookie_name": "",
"auth_header_name": ""
},
"use_basic_auth": false,
"enable_jwt": false,
"use_standard_auth": false,
"enable_coprocess_auth": false,
"jwt_signing_method": "",
"jwt_source": "",
"jwt_identity_base_field": "",
"jwt_client_base_field": "",
"jwt_policy_field_name": "",
"notifications": {
"shared_secret": "",
"oauth_on_keychange_url": ""
},
"enable_signature_checking": false,
"hmac_allowed_clock_skew": -1,
"base_identity_provided_by": "",
"definition": {
"location": "header",
"key": "x-api-version"
},
"version_data": {
"not_versioned": true,
"versions": {
"Default": {
"name": "Default",
"expires": "",
"paths": {
"ignored": [],
"white_list": [],
"black_list": []
},
"use_extended_paths": true,
"extended_paths": {},
"global_headers": {},
"global_headers_remove": [],
"global_size_limit": 0,
"override_target": ""
}
}
},
"uptime_tests": {
"check_list": [],
"config": {
"expire_utime_after": 0,
"service_discovery": {
"use_discovery_service": false,
"query_endpoint": "",
"use_nested_query": false,
"parent_data_path": "",
"data_path": "",
"port_data_path": "",
"target_path": "",
"use_target_list": false,
"cache_timeout": 60,
"endpoint_returns_list": false
},
"recheck_wait": 0
}
},
"proxy": {
"preserve_host_header": false,
"listen_path": "/ws/",
"target_url": "ws://echo.websocket.org/",
"strip_listen_path": true,
"enable_load_balancing": false,
"target_list": [],
"check_host_against_uptime_tests": false,
"service_discovery": {
"use_discovery_service": false,
"query_endpoint": "",
"use_nested_query": false,
"parent_data_path": "",
"data_path": "hostname",
"port_data_path": "port",
"target_path": "/api-slug",
"use_target_list": false,
"cache_timeout": 60,
"endpoint_returns_list": false
}
},
"disable_rate_limit": false,
"disable_quota": false,
"custom_middleware": {
"pre": [],
"post": [],
"post_key_auth": [],
"auth_check": {
"name": "",
"path": "",
"require_session": false
},
"response": [],
"driver": "",
"id_extractor": {
"extract_from": "",
"extract_with": "",
"extractor_config": {}
}
},
"custom_middleware_bundle": "",
"cache_options": {
"cache_timeout": 60,
"enable_cache": true,
"cache_all_safe_requests": false,
"cache_response_codes": [],
"enable_upstream_cache_control": false
},
"session_lifetime": 0,
"active": true,
"auth_provider": {
"name": "",
"storage_engine": "",
"meta": {}
},
"session_provider": {
"name": "",
"storage_engine": "",
"meta": null
},
"event_handlers": {
"events": {}
},
"enable_batch_request_support": false,
"enable_ip_whitelisting": false,
"allowed_ips": [],
"dont_set_quota_on_create": false,
"expire_analytics_after": 0,
"response_processors": [],
"CORS": {
"enable": true,
"allowed_origins": [
"*"
],
"allowed_methods": [
"*"
],
"allowed_headers": [
"*"
],
"exposed_headers": [
"*"
],
"allow_credentials": false,
"max_age": 24,
"options_passthrough": true,
"debug": false
},
"domain": "",
"do_not_track": false,
"tags": [],
"enable_context_vars": false
}
(Obviously change the proxy address).
Then browse to: http://127.0.0.1:8000/
And I see:
WebSocket Test
CONNECTED
SENT: WebSocket rocks
RESPONSE: WebSocket rocks
DISCONNECTED
In my console I can see that it has connected to my docker instance (which is a VM on a different IP address), so it is proxying correctly via Tyk.