WebSockets — это изменяющая игру технология, доступная в более новых браузерах (Chrome 4, Safari 5, Firefox 4 и т. Д.), Которая обеспечивает двунаправленную полнодуплексную связь между клиентом (веб-браузером) и сервером (веб-сервером) через TCP. На самом деле клиент не обязательно должен быть веб-браузером, но давайте сосредоточимся на этом, так как это действительно та сторона истории, которая не была возможна до этого момента. Проще говоря, это означает, что браузер может поддерживать соединение с сервером, пока страница открыта, и может использовать это соединение для отправки и получения данных ; Сервер также может отправлять и получать данные, очевидно (дух!).
WebSockets также доступен по URL-адресу, как обычные веб-страницы, но он вводит новый протокол, на самом деле пара, если вы включаете SSL, то есть ws: / / и wss: // . Например, вот URL для WebSocket, который я создал для демонстрации. Я покажу вам только что: ws: //mashup.fm: 9002 / livesearches .
Так что это значит для нас, разработчиков? Мы можем использовать для создания веб-приложений «в реальном времени», о которых вы начали слышать. Достаточно разговоров, я видел, что давайте приступим к делу, не так ли?
На прошлой неделе я создал демо-версию, демонстрирующую, насколько классно и просто делать Ajax с Play! и Sammy.js , очень простое приложение, использующее API Github. Живая демоверсия доступна здесь . Как играть! Добавил поддержку WebSockets в недавнюю версию 1.2, я решил добавить ее в демоверсию.
На главной странице я добавил раздел «Последние поисковые запросы», в котором будут перечислены поисковые запросы любого пользователя. Вот как я это сделал:
Сначала я создал класс с EventStream из новой библиотеки play.libs.F и контроллер, расширяющий новый WebSocketController. Кстати, я просмотрел play.libs.F и, хотя документация была не очень полной, что было хорошо, это заставило меня потратить некоторое время и просмотреть исходный код, и это здорово! Позже я напишу об этом статью, я хочу переписать столько кода! Вот как это выглядит:
public class LiveSearches {
/** The live stream. */
public static play.libs.F.EventStream liveStream = new play.libs.F.EventStream();
/**
* The Class WebSocket.
*/
public static class WebSocket extends WebSocketController {
/**
* Live searches.
*/
public static void stream() {
while (inbound.isOpen()) {
try {
Logger.info("Waiting for next search...");
String search = await(liveStream.nextEvent());
if (search != null) {
Logger.info("Publishing Live Search %s to Outbound Subscribers", search);
outbound.send(search);
}
} catch (Throwable t) {
Logger.error(ExceptionUtil.getStackTrace(t));
}
}
}
}
}
На контроллере поиска я делаю LiveSearches.stream.publish (String s), чтобы сделать условие поиска доступным. Затем функция stream () следит за тем, что EventStream, как только поисковый термин публикуется, получает значение (await (liveStream.nextEvent ())) и публикует, кто подключен к этому WebSocket (outbound.send (String s). )). Вы могли заметить, что я не определил функцию await, которая предоставляется потрясающими функциями Async через HTTP от Play! Вы можете прочитать больше об этом здесь . Этот последний выпуск также обеспечил значительное улучшение, поскольку он знает, где он остановился, когда произошло ожидание, и его прекрасной частью является то, что он не блокирует поток до тех пор, пока новое условие поиска не будет опубликовано в потоке.
Тогда на стороне клиента это очень просто, убедитесь сами:
var socket = new WebSocket('@@{LiveSearches.WebSocket.stream()}');
var display = function(event) {
$('#thread').append('
' + event + ''); } socket.onmessage = function(event) { display(event.data); }
Всякий раз, когда контроллер вызывает outbound.send (), клиент получает сообщение с вызовом socket.onmessage, тогда это обычный JavaScript для отображения значения.
Просто да?
Живая демоверсия доступна здесь . Откройте две вкладки, чтобы увидеть, как это работает, сначала откройте домашнюю страницу , затем на другой вкладке откройте страницу поиска . После того, как вы выполняете поиск, просмотрите поисковый запрос, автоматически появляющийся в разделе «Live Searches».
Исходный код для всего этого доступен на Github , пожалуйста, не стесняйтесь, чтобы раскошелиться код, надеюсь, это будет полезно для вас в любом случае.
Теперь иди играть!
Прочитайте оригинальную статью здесь .