html5,proxy,websocket,wampserver,reverse-proxy , How to configure Wampserver to act as a WebSocket proxy?

How to configure Wampserver to act as a WebSocket proxy?


Tag: html5,proxy,websocket,wampserver,reverse-proxy

I'm trying to set up a proxy server for a WebSocket chat app, but the client is telling me that it can't establish a connection to the proxy. I'm pretty new to WebSockets, so I have probably missed something.

My current setup is as follows:

I've added the following lines to the httpd.conf file for WampServer:

Listen [::0]:6060
ServerName localhost:6060

# block anyone but localhost from accessing my computer's C: drive
<Directory />
   Options FollowSymLinks
   AllowOverride none
   Order Deny,Allow     
   Deny from all
   Allow from ::1
   Require all denied

# set up a proxy on port 6060,forwarding any WebSocket requests to port 8080
<VirtualHost *:6060>
   ServerName proxyTestServer
   ProxyRequests Off
   ProxyPreserveHost On
   ProxyPass            /ws/    ws://[IPADDRESS]:8080/Chatroom/chatroom/
   ProxyPass            /wss/   wss://[IPADDRESS]:8080/Chatroom/chatroom/
   ProxyPassReverse     /ws/    ws://[IPADDRESS]:8080/Chatroom/chatroom/
   ProxyPassReverse     /wss/   wss://[IPADDRESS]:8080/Chatroom/chatroom/

The WebSocket in the client is defined as follows, using ordinary JavaScript:

chatSocket = new WebSocket("wss://[IPADDRESS]:6060");

Both Firefox 35 and Chrome 40 fail to connect to the proxy. This makes me suspect I've got the address wrong or configured the proxy incorrectly (although Wampserver does not show any errors). Like I said up at the top, I'm pretty new to WebSockets, so I might well have overlooked something.

Update (2nd of Feb 2015): after looking through the documentation on mod_proxy, I changed the configuration file so that the server and client communicate through port 80, along with the following. However, this has not worked.

ProxyRequests Off
ProxyPass        /chatProxy/        ws://localhost:8080/ChatProxy/ChatProxy/
ProxyPassReverse /chatProxy/        ws://localhost:8080/ChatProxy/ChatProxy/
ProxyPass        /chatProxy/        wss://localhost:8080/ChatProxy/ChatProxy/
ProxyPassReverse /chatProxy/        wss://localhost:8080/ChatProxy/ChatProxy/


I managed to solve this as follows:

My proxy has the following configuration:

# The proxy listens to a specific IP address
Listen [ProxyIP]:6060
ServerName [ProxyIP]:6060   

<VirtualHost *:6060>

   ServerName proxyserver
   ProxyRequests Off
   ProxyPreserveHost On
   ProxyVia On

   <Proxy *>
      Order deny,allow
      Allow from all          

   # anything on port 6060 which ends in /chatProxy will be redirected
   <Location /chatProxy>
      ProxyPass           ws://MyIP:8080/ChatProxy/ChatProxy
      ProxyPassReverse    ws://MyIP:8080/ChatProxy/ChatProxy

      # wss is similar, but obviously prefaced by wss instead of ws
</Virtual Host>

I'm not entirely sure why this works now, but I have noticed that it doesn't work if the client uses a WebSocketSecure connection. So, I probably haven't configured SSL properly, but I think I can figure that out later.


Animate dots or points from an offset to their actual position

How can I do the animation by using SVG or CSS? Animation should be like below: Initially, only lines will be visible(picture 1), after 2 seconds dots (.) will come and join to the line curves(picture 2) with some animation to the dots. Online Example Please check the code below...

How to configure proxy using Squid

I have a connection and I want change the connection behavior of the process to connect through that proxy. I would also like it to use a new IP in the event that it detects that it has been throttled. The new connection process that I want is : connect...

Proxy awareness with pip

I have tried to set up a python development environment at my work place to create some basic applications. I can't seem to get pip to work, for example I type in pip install numpy and get the following error message: Retrying (Retry(total=3, connect=None, read=None, redirect=None)) after connection broken by...

Load javascript in consecutive order after browser load event

What am I trying to do? In an attempt to speed up my website I am loading non-essential javascript after the browser load event. (So the JS files are not render blocking) This is currently functioning correctly. What is the problem? The problem is sometimes the non-essential javascript depends on...

Saving image to localstorage - canvas

I'm using html5 storage to store my image. It works great in chrome. In FireFox it works 8/10 times. function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); console.log("line 1 : " + img.src); var dataURL = canvas.toDataURL('image/jpeg'); console.log("line...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3

I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

JSON.parse parsing a string into string

I have confusion over the functionality of JSON.parse. I am writing code : dynamicMsgObj = '"rest, no disc"'; var jsonObj = {}; var isJsonString = function isJsonString(str) { try { jsonObj = JSON.parse(str); } catch (e) { return false; } return true; }(dynamicMsgObj); console.log(isJsonString);// returns true console.log(typeof jsonObj);//returns string How...

ZMQ: No subscription message on XPUB socket for multiple subscribers (Last Value Caching pattern)

I implemented the Last Value Caching (LVC) example of ZMQ (, but can't get a 2nd subscriber to register at the backend. The first time a subscriber comes on board, the event[0] == b'\x01' condition is met and the cached value is sent, but the second subscriber (same topic) doesn't...

onended audio event firing without playing the audio

I have multiple audio files that i need to be played. and only when all audio has been played completely the next section is supposed to show. the code that i've written fires automatically without playing any audio. how should i do it? here's my code <!DOCTYPE html> <html> <body>...

Custom Element extend from input type range

I can't figure out how to retrieve the current attr. value of the input type range element. The attr. value seems not be the 'internal attr. value' which is changed during slides. Javascript 'use-strict'; (function(){ var fooProt = Object.create(HTMLElement.prototype); Object.defineProperty(fooProt, "bar", { value: {test: 1}, writable: false, enumerable: true });...

NGINX Serve all static files and forward others to proxy without / giving 403?

I'm trying to configure an nginx server to act as a proxy to a node application. What I would like is to have any static files served by nginx and all other paths forwarded on to the Node.js application (inluding the / path). I've seen the following question/answers: How to...

Teechart HTML5, line color and thickness

How do you change the line color and thickness of a series in Teechart HTML5. I have been looking through the examples, but i can't find anything describing that....

What is the semantic HTML tag to display for URLs that are not links?

I have a search engine plugin that outputs results in a basic structure: <a href="page url"> <div class="searchResult"> <h3>Page title</h3> <p>Page url</p> <p>Page <meta> description</p> </div> </a> The plugin is designed to integrate into an existing website so it has no default styling. However, websites are supposed to be usable...

boostrap & Normalize.css: spacing problems

Boostrap normalize does not seem to remove top and left/right spacing from theme i am developing. Could somebody give hint where is the problem in my code. I have tried several reset css files also without any effects. Index <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- GOOGLE FONTS -->...

Regex not working in HTML5 pattern

So I have this regex intended to let pass all text but those that contain as initial chars the "34" sequence: ^(?!34)(?=([\w]+)) The regex is working fine for me in , check the tests to see the intended behavior. Any Idea why it isn't working in my form? <form>...

Using Aria to make a div table accessible

Context: I have a div table that a client wants to be screen reader accessible like a regular html table is using the table commands Problem: Cant get aria to work to announce the header with the row value to keep the integrity intact with the data. Solutions: Only using...

Can't install Composer on Ubuntu behind proxy

I'm trying to install Composer, in order to use Laravel, but I'm behind the company proxy. The proxy is already configured in the system, so wget --proxy-user=<my_user_name> --proxy-password=<my_password> works (curl doesn't!), and I get the 270kB "installer" file. Next, I'm trying to run php installer as the manual says,...

CSS drop down navigation

I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons. Here is my HTML: <div class="container-fluid"> <div class="section-title2 text-center">...

How to read all video type in a video tag

I make a web interface for my server and I want to read all my video, but I have some problems: When I change the innerHTML (in javascript) of my video tag with a new source tag, it keep playing the previous video then I need to refresh the page...

Retrive geolocation in real time (HTML5)

I have this code: var map; var geocoder; function initialize() { var mapOptions = { zoom: 18 }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({ position: pos, map: map, title: 'Posizione Attuale' });...

customize the handler of input range

When we use input range <input type="range", there is a handler which is moveable as how we handle it. Now I need a help how to customize this handle, in this case I want to change the default handler with my own handler(image of button). Thanks for the help <input...

Place tables one under another forming columns

I'm trying to create different columns containing elements of different categories. Demo online I started working with lists, but I found out that tables seems to be best suited for this purpose and categories won't break into different columns. The problem I'm encountering now is that if I have a...

How to convert date into timeago

I am trying to convert a date field in a "timeago" format using jquery.timeago.js $("time.timeago").timeago(); var userSpan = document.createElement("span"); userSpan.setAttribute("class", "text-muted"); userSpan.appendChild(document.createTextNode(message.usernameSender +" | ")); var timeTag = document.createElement("time"); timeTag.setAttribute("class", "timeago"); timeTag.setAttribute("datetime",document.createTextNode(; userSpan.appendChild(timeTag); This javascript will genearate the following code <span...

Tagging values in HTML document for automated extraction

We have a series of documents that are being converted to HTML for web access. The documents are operating instructions that list actions people have to do as well as distinct requirements. We wanted to put a tag around each requirement so it can be automatically extracted using some code....

validation of AngularJS direcrives

I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

Unwanted Space Between

I have the following HTML5 code: <!doctype html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> body { max-width: 960px; margin: 0 auto; font-size: 120%; } header, nav { margin: 0; padding: 0; border: 1px solid black; } header { border-color: red; } img.mainpicture { width: 100%; height: auto;...

enable a disabled select when choose a value in another select tag

I have these two select tag: <select> <option value="car">car</option> <option value="truck">truck</option> <option value="moto">moto</option> <option value="none">none</option> </select> <select disabled> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> As you can see, my second select have the disabled...

Show only the requested forms using JS

As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible. How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"? So, if the user clicked on the "send an invite"...

why i don't get return value javascript

When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

I have two tabs and I do not want them to stack when the window is resized. How do I do so? As shown below this is the code I've used to create my tabs. I don't understand why they would stack up when my window is resized. HTML Tab...

jQuery & CSS only load after many refreshes

If you open this page in IE11, the CSS and jQuery don't load: If you refresh the page once, maybe even twice, it still doesn't load. But if you hit F5 a bunch of times in succession, the CSS and jQuery finally load and the page displays correctly. This...

How to make my nav bar responsive

I would like to use media query to make my navbar responsive. @media screen and (max-width: 600px) { .nav-wrap { position: relative; min-height: 40px; } .nav-wrap ul { position: absolute; } .nav-wrap li { display: none; /* hide all <li> items */ margin: 0; } .nav-wrap .current_page_item { display: block;...

How secure are HTML5 forms?

<input id="user_lic" type="number" min="5" max="30" step="5" value ="5"/> Would someone be able to disable this min="5" statement and then submit the input with a negative value. Or for example bypass the type=number statement and enter a symbol...

Common CSS in all HTML Files [on hold]

Can I include all my css in my header.html and include that common header.html in all my files or i need to give reference to the same css in all my html files? I know i can include all my JS files in a common header.html because you can put...

Swap nav and div vertically uing CSS only

So I have a <nav> in my <header> tag and just below it I have a <div> which shows the date. Now the problem is, my design is in such a way that I cannot put the <div> for the date inside my <header>. However since I'm working with a...

Does localStorage.clear(); clear ALL from PC?

If I call the following: window.onbeforeunload = function() { localStorage.clear(); }; Does this clear all local storage from a user machine or just what my site has set?...

How can you drop an image from your desktop into an editor and move it around?

The default behavior when you drop something from your desktop to a textarea is that you will see the path to the image at the position where you dropped it. My end goal is to convert the local image as base64 and insert it at the drop position within the...

How can I make a DIV element Fixed but non-Scaleable?

Hopefully I'm asking this question right. Basically, I'm trying to implement a drop down menu into my design. I've been looking around for help coding it, since I'm still relatively new to HTML/CSS and found a few great tutorials that I have altered a bit to match what I have...

How to change my table based on screen size?

I want to change my table so it would look nice on a mobile platform. All I want to do is change my table so it is two columns. I am using this code to send an email. So I cannot link a stylesheet to my html. It is recommended...

HTML - How to properly mark a phrase

The <blockquote> tag demand a cite external source, but what if the only source is the name of the phrase author? The <cite> tag defines the name of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.), so it's no suitable to...

list checkboxes displayed horizontal

I have the following markup:- <div class="fil hori now"> <span class="label-new"> <ul class="ngc"> <li> <input class="any" id="any" name="any" type="checkbox"> <label id="any" for="any">Any</label> </li> <li class="new-select"> <input id="item1" name="item1" type="checkbox"> <label id="item1" for="item1">item1</label> </li> <li class="new-select"> <input id="item2" name="item2" type="checkbox"> <label id="item2"...

how can I use 'localStorage' to store an entire page?

I've been reading the book HTML in action and in chapter 5 it shows how to create a mobile application that can be runned even offline. My only doubt is: Can I do it for an entire page? and can you give me a simple but complete example on how...

HTML5, geolocation in real time with marker

I have this code: function startTracking() { var trackId = navigator.geolocation.watchPosition(successCallback, null, {maximumAge:1000, timeout:60000, enableHighAccuracy:true}); function successCallback(position){ map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); var marker = new google.maps.Marker({ position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), map: map, title: 'Posizione Attuale' }); marker.setMap(map); }; } Now the app create a marker every time that I move. I...

Redraw text over clearRect HTML5 Canvas

I'm trying to draw text (HTML5 canvas) depending on what option is selected in a select element. It works correctly until there's 2 set of text that appears at the same place. It seems like the clearRect function is the issue. The text won't be redrawn over that cleared space....

Spring Mobile apps to be deployed in emulator

I'm trying to develop an application based on Spring MVC for mobile device. Spring Mobile do provide such features to view our application in mobile browser. But how can I run/deploy the application in emulator since it's non-android based application? Also if can anybody tell me, how can I test...

More modern image maps?

With all the recent advances in JavaScript/HTML5 it would be nice to think there would be a more modern way of implementing an image map. I know you can set a map property for the tag but I don't think this supports nicely formatted tooltips on rollover (near the region)....

html query string with blackberry

My hybrid mobile app needs to work on blackberry devices as well. I noticed that a simple html query string such as Works also this way using the anchor tag (even if it is not standard) using Android and iOS. I don't have a blackberry to try but...

Sending input data to a javascript file

My following code is this: <form> <input class="inputField" type="text" required="required" pattern="[a-zA-Z]+" /> <input class="myButton" type="submit" value="Submit" /> </form> <script type="text/javascript"> $(document).ready(function () { $(".myButton").on("click", function () { var value = $(".inputField").val(); }); }); </script> I want to send to the file main.js the data after a user puts in some...

javascript onblur onMouseOver calculate tax and autofill form input

After 2 days searching I give up. I have a form and need to add (autofill) taxes to the input total price but in a easy simple way: <form name="form" action="go.php"> <input name="cost" type="text"> <input name="costplustax" type="text" value=" here we autofill cost +19%> <input type="submit" value="ready to mysql"> I can...

how to add a message (memo / sticky note) on (top of existing) html page

How do I achieve this: I have an HTML5 homepage and want to give the visitors a message (e.g. "dear visitor, I am on vacation from....") in the form of a memo/sticky note e.g. in the top right corner of the home page. Is there a neat and nice solution...