Создайте веб-приложение с Backbone.js и Socket.IO

Связь в реальном времени между сервером и клиентом

WebSockets — это продвинутый способ, позволяющий открыть интерактивный сеанс связи между браузером пользователя и сервером. С помощью этого API пользователи могут отправлять сообщения на сервер и получать управляемые событиями ответы, не запрашивая ответ у сервера. Этот контракт представляет собой соглашение, которое описывает правила и ожидаемое поведение и влечет за собой действия с обеих сторон. Когда эти две части соединяются через API, это служит связующим звеном для интеграции сервера и клиента.

По аналогии с мостом, однажды введенные данные и инструкции могут пересечь мост. Например, сервер получает инструкцию, выполняет действие и после обработки инструкции возвращает информацию обратно в веб-приложение. Дари и получай между сторонами. С помощью этого уровня абстракции (API) мы скрываем сложные вещи веб-сервисов без необходимости разбираться в деталях о том, как сервер выполнил действие.

Socket.IO — это библиотека JavaScript для веб-приложений реального времени. Это позволяет двунаправленную связь между веб-клиентами и сервером. Обе стороны имеют идентичный API и управляются событиями, как Node.js. Чтобы открыть этот интерактивный сеанс связи между браузером и сервером, нам нужно создать HTTP-сервер для обеспечения связи в реальном времени. Это позволит нам излучать и получать сообщения. socket — это объект, который обрабатывает эту связь между веб-клиентами и сервером.

Приведенный ниже код создает этот сервер, используя socket.IO с платформой Express .

 var express = require('express'), app = express(), http = require('http').Server(app), io = require('socket.io')(http); http.listen(process.env.PORT || 5000, function(){ console.log('listening on *:5000'); }); 

После создания этого сервера у нас есть класс io который позволяет настроить обратный вызов, который принимает socket в качестве параметра. С помощью этого объекта socket мы можем создать соединение между браузером пользователя и сервером.

 io.on('connection', function(socket) { console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); }); 

В браузере клиент соединяется с сервером, вызывающим функцию io которая возвращает socket для соединения:

 var socket = io("http://pubsub-example-with-backbone.herokuapp.com/"); 

Сказал, что давайте создадим простое сообщение, что данные и инструкции могут пересекать мост.

 var socket = io("http://pubsub-example-with-backbone.herokuapp.com/") // retrieve all nodes already stored in the server socket.emit('retrieve-all-nodes') $("button#add-new-node") .on('click', function () { socket.emit('add-node', {}, function (obj) { console.log(obj) }) }) socket.on('node-added', function (node) { var $nodes = $("ul#nodes").append(` <li id="${node.id}"> <span>${node.id}</span> <button>x</button> </li> `) $nodes .find(`li#${node.id} button`) .on('click', function () { socket.emit('remove-node', node) }) }) socket.on('node-removed', function (node) { $("ul#nodes").find(`#${node.id}`).remove() }) 

С этим кодом мы можем создать следующую демонстрацию :

 var MyView = Backbone.View.extend({ el: '#my-backbone-app', events: { 'click button#add-new-node': 'addNewNode' }, initialize: function (options) { var view = this view.socket = io("http://pubsub-example-with-backbone.herokuapp.com/") view.socket.emit('retrieve-all-nodes') view.model = new MyModel() view.socket.on('node-added', function (node) { var $node = $(` <li> <span>${node.id}</span> <button>x</button> </li> `) view.model.set(node.id, $node) view.$el.find("ul#nodes").append($node) $node.on('click', function () { view.socket.emit('remove-node', node) }) }) view.socket.on('node-removed', function (node) { view.model.get(node.id).remove() view.model.unset(node.id, {}) }) console.log('view initialized') }, addNewNode: function () { this.socket.emit('add-node', {}, function (obj) { console.log(obj) }) } }) 

 var EventChannel = _.extend({}, Backbone.Events); 

 var socket = io("http://pubsub-example-with-backbone.herokuapp.com/") var MyPubSub = $.extend({}, Backbone.Events) MyPubSub.on('disconnect', function () { console.warn('disconnected') }) socket.on('node-added', function (node) { MyPubSub.trigger('node-added', node) }) socket.on('node-removed', function (node) { MyPubSub.trigger('node-removed', node) }) MyPubSub.on('retrieve-all-nodes', function () { socket.emit('retrieve-all-nodes') }) MyPubSub.on('add-node', function (node, cb) { socket.emit('add-node', node, function (obj) { if (cb) { node.id = obj.id cb(node) } }) }) MyPubSub.on('remove-node', function (node) { if (node && node.id) { socket.emit('remove-node', node) } }) 

 var MyView = Backbone.View.extend({ el: '#my-backbone-app', events: { 'click button#add-new-node': 'addNewNode' }, initialize: function (options) { var view = this view.model = new MyModel() MyPubSub.on('node-added', function (node) { var $node = $(` <li> <span>${node.id}</span> <button>x</button> </li> `) view.model.set(node.id, $node) view.$el.find("ul#nodes").append($node) $node.on('click', function () { MyPubSub.trigger('remove-node', node) }) }) MyPubSub.on('node-removed', function (node) { view.model.get(node.id).remove() view.model.unset(node.id, {}) }) MyPubSub.trigger('retrieve-all-nodes') console.log('view initialized') }, addNewNode: function () { MyPubSub.trigger('add-node', {}, function (obj) { console.log(obj) }) } }) 

 git clone https: //github.com/sitepoint-editors/pubsub-example-with-backbone.git