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

首頁 >

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.
主站蜘蛛池模板： 临夏县| 双鸭山市| 惠州市| 小金县| 天祝| 武隆县| 广河县| 宁阳县| 封丘县| 罗城| 邳州市| 汾西县| 宜兰县| 广东省| 新野县| 南乐县| 楚雄市| 长沙县| 新疆| 曲松县| 长宁县| 晋城| 共和县| 长沙市| 延长县| 磐安县| 防城港市| 元氏县| 如东县| 牡丹江市| 乐安县| 大渡口区| 日土县| 安西县| 历史| 固阳县| 阿鲁科尔沁旗| 翁源县| 沁阳市| 望江县| 新巴尔虎左旗|