Click here to Skip to main content
12,398,000 members (54,046 online)
Click here to Skip to main content

Stats

362.1K views
32K downloads
156 bookmarked
Posted

Web Socket Server

, 3 Jun 2010 CPOL
An example of an implementation of a web socket server and how to interact with it from JavaScript
<html> 
 
<head> 
    <title>Web Socket Chat</title>

    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var ws;
    $(document).ready(function () {

        // test if the browser supports web sockets
        if ("WebSocket" in window) {
            debug("Browser supports web sockets!", 'success');
            connect($('#host').val());
            $('#console_send').removeAttr('disabled');
        } else {
            debug("Browser does not support web sockets", 'error');
        };

        // function to send data on the web socket
        function ws_send(str) {
            try {
                ws.send(str);
            } catch (err) {
                debug(err, 'error');
            }
        }

        // connect to the specified host
        function connect(host) {

            debug("Connecting to " + host + " ...");
            try {
                ws = new WebSocket(host); // create the web socket
            } catch (err) {
                debug(err, 'error');
            }
            $('#host_connect').attr('disabled', true); // disable the 'reconnect' button

            ws.onopen = function () {
                debug("connected... ", 'success'); // we are in! :D
            };

            ws.onmessage = function (evt) {
                debug(evt.data, 'response'); // we got some data - show it omg!!
            };

            ws.onclose = function () {
                debug("Socket closed!", 'error'); // the socket was closed (this could be an error or simply that there is no server)
                $('#host_connect').attr('disabled', false); // re-enable the 'reconnect button
            };
        };

        // function to display stuff, the second parameter is the class of the <p> (used for styling)
        function debug(msg, type) {
            $("#console").append('<p class="' + (type || '') + '">' + msg + '</p>');
        };

        // the user clicked to 'reconnect' button
        $('#host_connect').click(function () {
            debug("\n");
            connect($('#host').val());
        });

        // the user clicked the send button
        $('#console_send').click(function () {
            ws_send($('#console_input').val());
        });

        $('#console_input').keyup(function (e) {
            if(e.keyCode == 13) // enter is pressed
                ws_send($('#console_input').val());
        });

    });
</script> 
 
<style type="text/css"> 
	.error {color: red;}
	.success {color: green;}
	#console_wrapper {background-color: black; color:white;padding:5px;}
	#console p {padding:0;margin:0;}
</style> 
</head> 
 
<body> 
 
<h1>Web Socket Chat</h1> 
 
<div id="server_wrapper"> 
	<p>Server
		<input type="text" name="host" id="host" value="ws://localhost:8181/chat" /> 
		<input type="submit" name="host_connect" id="host_connect" value="Reconnect!" /> 
	</p>
    <p>Type /nick your_nickname to change your nick</p>
</div> 
 
<div id="console_wrapper"> 
	<pre id="console"></pre> 
	<input type="text" name="console_input" id="console_input" value="" /> 
	<input type="submit" name="console_send" id="console_send" value="Send" /> 
</div> 
 
</body> 
 
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

jonlist
Denmark Denmark
Software Developer in Aalborg, Denmark.

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 3 Jun 2010
Article Copyright 2010 by jonlist
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid