官术网_书友最值得收藏!

首頁 >

Socket.IO Cookbook

Using Socket.IO as a cross-browser WebSocket

The native WebSocket implementation in browsers is much less robust than what Socket.IO offers. Sending a WebSocket message from the client only requires the data as a single argument. This means that you have to format your WebSocket data in such a way that you can easily determine what it is for.

If you want to emulate the ease of sending a message without a topic, you can use the socket.send() method to send messages as needed.

The benefits of using the Socket.IO syntax for this type of interaction over plain WebSockets are numerous. They include the built-in fallbacks for browsers that don't support WebSockets. The benefits also include a single unified syntax that is easier to read and maintain.

Getting ready

To get started with Socket.IO as a cross-browser WebSocket, you will need to have Node, Express, and Socket.IO installed. If you have not installed them yet, refer to the previous recipe: Creating an Express server with Socket.IO.

How to do it…

Follow these instructions to use Socket.IO as a cross-browser WebSocket:

  1. First, you'll need to set up your server-side server.js file as follows: 
    var io = require('socket.io')(5000),
    sockets = [];

io.on('connection', function (socket) {
    sockets.push(socket);
    socket.on('message', function (message) {
        for (var i = 0; i < sockets.length; i++) {
            sockets[i].send(message);
        }
    });
    socket.on('disconnect', function () {
        console.log('The socket disconnected');
    });
});
  2. Next, you'll have to create a client-side index.html file with the following code: 
    <!doctype html>
<html>
<head></head>
<body>
<form id="my-form">
<textarea id="message" placeholder="Message"></textarea>
<p>
<button type="submit">Send</button>
</p>
</form>

<div id="messages"></div>

<script src="http://localhost:5000/socket.io/socket.io.js"></script>
<script>
        var socket = io('http://localhost:5000');
        socket.on('connect', function () {

            document
                .getElementById('my-form')
                .addEventListener('submit', function (e) {
                   e.preventDefault();
                   socket.send(document.getElementById('message').value);
                });

            socket.on('message', function (message) {
                var messageNode = document.createTextNode(message),
                    messageElement = document.createElement('p');

                messageElement.appendChild(messageNode);

                document.getElementById('messages').appendChild(messageElement);
            });
        });
</script>
</body>
</html>
  3. In our example, we have a simple form that allows the user to post a message that will be sent to all the connected sockets.
  4. If you start your server with node server and open your index.html file by navigating to http://5000/index.html in your browser, you should see the form on the index page:
    How to do it…
  5. If you post a message to the form, it should send it to the server, and the server should broadcast it to all the available clients, as shown in the following screenshot:
    How to do it…

How it works…

The socket.send(...) method is a shortcut for socket.emit('message', ...). We will take a look at this topic in Chapter 3, Having Two-Way Conversations. This is the reason when the server listens for a message topic, it gets called when the client calls socket.send().

Our server stores an array of all the topics that connect to it. We will loop through all the connected sockets to send the message when it comes. We will also explore better ways to manage the connected sockets in the next chapter.

The client side aids the duty of sending the data from the form to the server. It also listens for new messages from the server to add to the list of available messages in our UI underneath the form.

There's more…

We will keep an array of all the connected sockets so that we will be able to easily send data to all of them as needed. However, keeping an array of all the connected sockets can be a little more tedious than just pushing the sockets to the array when they connect. For example, if a user leaves the page, the socket will disconnect, but it will still be included in the static array.

Fortunately, we will be able to tap into the socket disconnect event by calling socket.on('disconnect'). Using this method, we can remove the socket from our array and avoid sending messages to an abandoned socket connection.

Here is an example of how the disconnect event can be used to manage dropped connections:

var io = require('socket.io')(5000),
    sockets = [];

io.on('connection', function (socket) {
    sockets.push(socket);
    socket.on('disconnect', function () {
        for (var i = 0; i < sockets.length; i++) {
            if (sockets[i].id === socket.id) {
                sockets .splice(i, 1);
            }
        }
        console.log('The socket disconnected. There are ' + sockets.length + ' connected sockets');});
});

See also

  • The Handling connection timeouts section in Chapter 2, Creating Real-Time Dashboards
  • The Creating a simple chat room section in Chapter 3, Having Two-Way Conversations.
主站蜘蛛池模板： 南雄市| 巴里| 正蓝旗| 江油市| 北川| 比如县| 股票| 洱源县| 宁乡县| 当雄县| 恩平市| 蒲城县| 芦山县| 江西省| 习水县| 湖南省| 浪卡子县| 田东县| 乌审旗| 沁阳市| 荣昌县| 错那县| 大城县| 平阳县| 兴和县| 平潭县| 洪江市| 博湖县| 科尔| 马鞍山市| 奉新县| 桑植县| 红原县| 兴文县| 汉中市| 江北区| 新丰县| 铜陵市| 金华市| 河池市| 安庆市|