Google Voice

Самый трудоемкий момент — это получение аккаунта в Google Voice.

Данная инструкция двухгодичной давности в принципе актуальна habrahabr.ru/post/94970/ разве только американский прокси не обязателен, у меня получалось через нидерландский и немецкий.

За два года Google Voice научился нормально принимать SMS, переправлять их на почту (правда сообщения, содержащие кирилические символы, не доходят из некоторых сетей) и записывать разговоры.

Так же теперь при регистрации номера можно попытаться подобрать мнемонический номер из указанного слова, как например +1-800-MY-APPLE (call-центр Apple). На удивление, номеров довольно много и найти соответствие можно для большого количества слов.

Чтобы избежать путаницы при регистрации Google Voice я советую поступить так:

сначала в Gmail нажать «Набрать номер», если вы ранее не нажимали его, будет предложено принять пользовательское соглашение.



После того как соглашение принято переходим на google.com/voice. Должен появится пункт Get a Voice number. Если его нет, меняем прокси и пробуем снова.





Жмем I want new number. На этом этапе можно подобрать мнемонический номер:



Далее нас попросят подтвердить что мы имеем американский телефонный номер, на который позвонит робот и попросит ввести в тональном режиме двухзначный код. Номер можно получить по инструкции в приведенной выше ссылке, либо купить в Skype. На один номер можно активировать два Google Voice, поэтому если вы получили номер в ipkall, можете помочь другу. Бывает так что в ipkall выдается номер на который уже активировано два Google Voice, в таком случае нужно зарегистрировать заново. У меня осталось несколько не активированных номеров, поэтому если у вас совсем ничего не получится, я могу посодействовать.

После того как активация пройдена, и Google Voice выдал вам номер, первый номер больше не нужен, его можно удалить из списка привязанных. Теперь на этот номер можно бесплатно принимать любые звонки прямо в интерфейсе Gmail, звонить на любые американские номера, записывать разговоры, настроить голосовую почту и прием SMS.

В настройках Google Voice нужно указать Forwards calls to: Google chat. Чтобы звонки принимались сразу же, нужно отключить Call Screening в меню Calls, иначе всех звонящих робот будет просить представиться, пытаясь, распознать имя, чтобы вписать его в логах (русские имена не понимает).

В меню Voicemail & Text отметить пункт Forward text messages to my email.

Sip to Skype

Чтобы звонить бесплатно в Skype нужнон айти американский номер, который перенаправит звонок на нужный skype-аккаунт… Из известных мне sip-операторов услугу переадресаци на Skype предоставляют sipnet.ru и zadarma.com/ru/ оба имеют шлюзы в америке, разница только в том что sipnet.ru взымает плату за входящие через шлюзы, а zadarma.com делает это беслпатно.

В панели zadarma в меню «Настройки SIP» можно добавить до трех SIP-аккаунтов, это значит переадресацию можно настроить только на три skype-логина.

В строке «Переадресация SIP на телефон» указываем желаемый аккаунт, где myskype — это skype-логин:



В результате для того, чтобы позвонить позвонить товарищу в Skype из Гугл почты, я звоню на +1 (718) 831-71-56 (американский шлюз задармы) и набираю добавочный пятизначный номер. Товарищ видит входящий звонок от skype-аккаунта skypegate.ru (его желательно добавить в контакты заранее) и добавляет его в конференцию.

© Habrahabr.ru

© Habrahabr.ru

1. Вступление
2. Установка
3. Настройка рабочей среды (по желанию)
4. Создание первого проекта
5. Работа с БД
6. CRUD
7. Дополнение
8. Итоги
9. Ресурсы

Вступление

В этой статье мы сделаем веб сайт, который будет представлять собой адресную книгу (addressbook) с возможностью добавления/удаления/просмотра/редактирования записей. Т.е. реализуем стандартный CRUD.

Для интересующихся: вся разработка отняла примерно 4-5 часов, включая установку, настройку инструментов и изучение.

Для достижения поставленной задачи были использованы следующие инструменты:

Ubuntu 11.10 32bit, Erlang R15B, ChicagoBoss MVC фреймворк, документно-ориентированная база данных MongoDB, Gedit с пакетом плагинов Gmate от iskin (Gedit — это просто текстовый редактор).

Установка для Mac не сложнее установки для Ubuntu. Для Windows есть отдельная инструкция, но и она от приведенной здесь не особо отличается. Может быть найдутся добрые люди, которые поделятся своим опытом установки для Windows/Mac в комментариях.

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

Я лично никогда до этого не имел дела ни с функциональными языками, ни с документно-ориентированными базами данных, но это мне не помешало создать свое первое приложение с ними.

Все ссылки на полезные ресурсы, на исходники и на готовый веб сайт в разделе Ресурсы.

Стоит упомянуть, что сайт находится на моем личном ноуте (Dual-Core CPU T4300 @ 2.10GHz, 2GB). Так что пожалуйста без фанатизма. О падениях (если такие будут) буду сообщать. Предвидя ваш вопрос: запустил я сайт локально, т.к. хотел проверить, при какой нагрузке рухнет сервер. Ну и дешевле получается, чтоб лишний хостинг не покупать. Может кто проявит желание и поделится нормальным сервером, разместим сайт там.

Если сайт не открывается, значит я химичу с ноутом, попробуйте открыть через пару минут.

Если какой-то из моментов не понятен, пишите в комментариях, буду править статью.

Установка

Erlang

Для начала нужно установить Erlang последней версии. Идем на этот веб сайт и следуем инструкции для вашей операционной системы. Там же можно скачать нужный дистрибутив или посмотреть необходимый репо.

У меня Убунту 11.10 32 битная. Для нее дистрибутива нет, только для 64х битной. Поэтому я просто скачал дистрибутив для Убунту 11.04 32 бит. Некоторые фишки в ней не работают, как например графический просмотр существующих потоков и процессов (утилита appmon).



Но обучению, и даже созданию нормальных проектов, это не мешает.

Ну и конечно всегда можно собрать нужную версию для своей версии ОС из исходников Мой товарищ свои версии уже раз 5 собирал для разных машин: Ubuntu и Mac. Говорит, что конечно геморойно, но вполне возможно за один вечер осилить.

Еще с проблемами можно обращаться в Erlang-Solutions. Говорят, ребята отзывчивые.

После скачивания файла и при запуске установки мне выдало следующее:

installing esl-erlang 1:15.b

size - 63.8 mb

После установки для проверки приложения открываем консоль и пишем команду erl. Которая выдает примерно следующее:

Erlang R15B (erts-5.9) [source] [smp:2:2] [async-threads:0] [hipe] [kernel-poll:false]

Eshell V5.9

ChicagoBoss

Скачать framework можно и без Git, просто зайти на страницу разработки и стянуть последнюю версию.

Устанавливаем Git, если его у вас еще нет:

apt-get install git-core

получаем копию ChicagoBoss framework:

git clone git://github.com/evanmiller/ChicagoBoss.git



Заходим в дирректорию вашего репо:

cd ChicagoBoss

Компилируем:

./rebar get-deps clean compile

Чтобы завести новый проект (нужно находится в дирректории нашего фреймворка):

make app PROJECT=your_project_name_here

Затем:

cd ../your_project_name_here

Для запуска дебаг (developer) режима:

./init-dev.sh

Для запуска в продакшн:

./init.sh start

Дождитесь, пока сообщения перестанут двигаться. Если отчетов об ошибках или крешах нет, то можно открывать localhost:8001

Теперь можно создавать новые модели, контроллеры, вьюшки и сразу смотреть результат без перекомпиляции и перезапуска сервера. В некоторых случаях перекомпиляция все-таки нужна, например когда меняете маршруты (routes).

Компиляция вызывается командой:

./rebar compile

ChicagoBoss по умолчанию использует веб-сервер на Misultin и при создании приложения в конфиге прописывается порт 8001. При желании сервер можно заменить на Mochiweb, а возможно и на Cowboy.

MongoDB

Тут все очень просто. Качаем и устанавливаем. В Убунту вобще только одна команда:

apt-get install mongodb

Для проверки работоспособности можно ввести одну из команд в консоль:

mongo

или

ps aux | grep mongo

А также можно попробовать постучаться по адресу localhost:28017. Родной порт, по которому приложения обычно работают с Монго — 27017. Для браузера по умолчанию используется 28017.

Для управления MongoDB сервером используются следующие команды:

$ sudo status mongodb

$ sudo stop mongodb

$ sudo start mongodb

$ sudo restart mongodb

После некорректного выключения сервера, например, при выключении/перезагрузке машины, при старте сервера БД он все равно остается выключенным. Сделано это специально созданием lock файла. Чтобы запустить сервер снова нужно сделать следующее:

1. Удалить lock файл

2. Запустить скрипт восстановления

$ sudo rm /var/lib/mongodb/mongod.lock

$ sudo -u mongodb mongod -f /etc/mongodb.conf --repair

Ну вот собственно и все, мы готовы к созданию наших собственных приложений. По большому счету приложения создавать можно и без базы данных, либо использовать другую БД. На ваше усмотрение. Поддерживаемые БД перечислены в документации.

Настройка рабочей среды (по желанию)

Я скачал пакет плагинов Gmate. Из них реально использую пока только Zen Coding. Отличное пособие по использованию этого плагина представлено в этой видео лекции. Реально упрощает жизнь.

Один мой друг сказал что это HAML для бедных, но меня использование этой прослойки пока «не вставляет».

И еще использую сниппеты (Snippets). Этот плагин поставляется с Gedit, но по умолчанию он выключен. Для включения идем Edit -> Preferences -> Plugins -> Snippets.

Он прост в использовании, просто открываете Tools -> Manage Snippets -> «your_language» и редактируете существующие или добавляете свои сниппеты. Инструкция по работе с ними находится здесь. У меня на их разбор ушло минуты 3 и потом еще минут 15 на создание своих собственных. Зато как удобно потом написать что-то типа div, нажать на Tab и получить следующее:

А при желании можно еще текста добавить, например дополнительных полей id, style и т.д. А также поставить значения по умолчанию и точки, куда курсор будет прыгать при следующем нажатии Tab.

Я работал со сниппетами в Visual Studio, ИМХО в Gedit с ними работать гораздо удобнее.

И да, подобные плагины есть для Emacs, Notepad++ и еще для кучи других редакторов.

Создание первого проекта

Все поставлено, все работает. Можно приступать к созданию своего веб-сайта. Заходим в дирректорию с ChicagoBoss и пишем команду:

make app PROJECT=addressbook

Да, названием проекта должен быть валидный атом. Атом — это именованная константа. Начинаться название должно только с маленькой буквы, название может содержать только буквы, цифры и символ подчерка.

Фреймворк создает новую директорию, по-умолчанию в домашнем каталоге. Весь проект находится внутри, если возникнет желание переместить/передать кому-то/удалить проект, достаточно будет манипуляций с этим каталогом. Переходим во вновь созданную директорию нашего проекта

cd ../addressbook

Весь наш код/ресурсы лежат в каталоге src. Общая структура:



Структура каталога src:



Файлы ресурсов (javascript, css, медиафайлы) лежат в /priv/static/. Подключение файла стилей будет выглядеть так:

Редактируем boss.config, добавляем данные о БД:

{db_host, «localhost»},

{db_port, 27017},

{db_adapter, mongodb},

{db_database, addressbook},

{db_write_mode, safe},

{db_read_mode, master},

Вот так выглядит мой конфиг (и вобще окружающая среда):



Я в первый раз слово addressbook неправильно написал, пришлось потом приложение пересоздавать с правильным именем, потому что к имени привязано многое.

Далее создаем файл address.erl в src/model/. Он нужен для доступа к БД. У меня он выглядит так:

-module(address, [Id, Firstname, Lastname, Address1, Address2, City, State, Country, Active, CreationTime, ModifictionTime ]).
-compile([export_all]).

Cоздадим контроллер с именем addressbook_main_controller.erl (appname_controllername_controller) и напишем внутри такой код:

-module(addressbook_main_controller, [Req, SessionID]).
-compile([export_all]).

index('GET', [])->{ok, [{data, "Hello World"}]}.

index — это наша функция,

все что находится после «->» является телом функции.

Эта функция будет реагировать на запрос GET и при удачной обработке вернет нашу строку в переменной data.

ok — означает что все прошло хорошо. Для обработки ошибки используется слово error. Выглядеть это может так:

index('GET', [])->
	{ok, [{data, "Hello World"}]};
	{error, Reason}->
			Reason.

Для того чтобы отобразить вернувшееся значение на странице, в нашей вьюшке нужно будет добавить тег {{data}}. Для проверки создадим наш первый html файл в каталоге /src/view/main/. Назовем его index.html:

  
    

  
  


	  {{data}}
      


  

Последний штрих заключается в настройке маршрутов. Открываем файл /priv/addressbook.routes и дописываем наш новый маршрут (по умолчанию у нас еще нет ни одного маршрута, все строки закомментированы):

{"/", [{controller, "main"}, {action, "index"}]}.

Компилируем наше приложение ./rebar compile

И запускаем ./init-dev.sh

Если теперь перейти в браузер и открыть localhost:8001, можно будет увидеть наш Hello World.

Все последующие изменения, за исключением изменения маршрутов, будут применены без перекомпиляции и перезапуска сервера, т.е. на лету.

Про маршруты: можно жестко указать, при каком адресе какой контроллер и метод вызывать. Либо можно в адресе задавать полный путь вида /[controller name]/[action name]. Т.е. в нашем случае у нас есть контроллер с именем main. Если мы добавим в наш контроллер новый метод с именем create, то вызвать его можно будет, обратившись по адресу localhost:8001/main/create. Либо указав следующий маршрут:

{"/create", [{controller, "main"}, {action, "create"}]}.

И тогда вызов будет выглядеть как localhost:8001/create

Работа с БД

Подключение к нашей БД уже состоялось. Вы даже можете выполнять запросы в консоли во время работы веб-сервера. Для этого достаточно перейти в консоль, где мы выполнили команду запуска приложения ./init-dev.sh, нажать, например, Ввод и в новой открытой строчке ввести, например это:

boss_db:find(address, []).

Данная команда выводит все записи, привязанные к модели address. Сейчас там нет ни одной записи (или есть пустая по-умолчанию).

Вы можете ввести boss_db: нажать Tab и посмотреть доступные команды.

[] — означает «параметры». Если внутри скобок пусто, значит вы передаете 0 параметров. В случае с командой find можно получить список записей, у которых firstname=«ivan»:

boss_db:find(address, [{firstname, "ivan"}]).

В консоли можно выполнять множество полезных команд, и не только с БД.

CRUD

И так, наша модель готова к работе, теперь в контроллере можно добавлять новые функции. Добавим функцию create, которая будет добавлять новые записи:

create('GET', [])->ok;
create('POST', [])->
	Firstname = Req:post_param("firstname"),
	Lastname = Req:post_param("lastname"),
	Address1 = Req:post_param("address1"),
	Address2 = Req:post_param("address2"),
	City = Req:post_param("city"),
	State = Req:post_param("state"),
	Country = Req:post_param("country"),
	Active = Req:post_param("active"),
	CreationTime = erlang:now(),
	ModificationTime = erlang:now(),
	NewAddress = address:new(id, Firstname, Lastname, Address1, Address2, City, State, Country, Active, CreationTime, ModificationTime),
	case NewAddress:save() of
		{ok, SavedAddress}->
			{redirect, [{action, "index"}]};
		{error, Reason}->
			Reason
	end.

Я думаю прочитать код для программиста не составляет труда, поэтому объяснять я тут ничего не буду. Единственное что могу сказать, что id создается автоматом.

id — зарезервированное слово.

Id — так можно назвать вашу переменную.

Да, язык регистрозависимый.

Теперь создадим html файл для этого метода. Назовем его create.html:

   

   
   





Frist name




Last name




Address1




Address2




City




State




Country




Active





         Submit
      


   

Тут важно отметить, что для наших контролов, которые передают значения, нужно указывать и id и name параметры. Каждый из них используется разными частями фрэймворка. По-моему Эван это дело хочет пофиксить и оставить только один обязательный параметр. Кстати, обновления выходят довольно часто, чуть ли не каждую неделю, так что не исключено что к моменту публикации этой статьи фикс уже будет выпущен.

Добавим еще одну функцию для просмотра всех записей в нашей базе (точнее заменим написанную ранее функцию index):

index('GET', [])->Addresses = boss_db:find(address, []),
	{ok, [{addresses, Addresses}]}.

Также поменяем код нашей index.html страницы:

  
    

  
  





		{% if addresses %}
			{% for address in addresses %}


			{% endfor %}
		{% endif %}
	


First name
Last name
City
Address1
Address2
State
Country
Active

{{address.firstname}}
{{address.lastname}}
{{address.city}}
{{address.address1}}
{{address.address2}}
{{address.state}}
{{address.country}}
{{address.active}}




  

ChicagoBoss использует систему шаблонов Django, через библиотеку ErlyDTL. The Django Template language.

Теперь при обращении по адресам /main/ и /main/create вы получите 2 формы: с вводом и выводом информации из БД.

Для удаления (delete) записи будет достаточно следующей функции в нашем контроллере:

delete('GET', [Id])->
	boss_db:delete(Id),
		{redirect, [{action, "index"}]}.

Остается только его вызвать localhost:8001/main/delete/[id]

Для отображения записи (show), добавим в контроллер эту функцию:

show('GET', [Id])->
	Address = boss_db:find(Id),
		{ok, [{address, Address}]}.

Создадим view файл show.html:

   

   
   



			{% if address %}


			{% endif %}
			

First name
{{address.firstname}}


Last name
{{address.lastname}}


City
{{address.city}}


Address1
{{address.address1}}


Address2
{{address.address2}}


State
{{address.state}}


Country
{{address.country}}


Modification time
{{address.modification_time}}


Creation time
{{address.creation_time}}


Active
{{address.active}}




  

Редактирование записи — это смесь create и show. Добавим еще две функции в наш контроллер:

edit('GET', [Id])->
	Address = boss_db:find(Id),
		{ok, [{address, Address}]};

edit('POST', [Id])->
	Address = boss_db:find(Id),
	NewAddress = Address:set([{firstname, Req:post_param("firstname")}, {lastname, Req:post_param("lastname")}, {address1, Req:post_param("address1")}, {address2, Req:post_param("address2")}, {city, Req:post_param("city")}, {state, Req:post_param("state")}, {country, Req:post_param("country")}, {active, Req:post_param("active")}, {modification_time, erlang:now()}]),
	case NewAddress:save() of
	{ok, SavedAddress}->
		{redirect, [{action, "index"}]};
	{error, Reason}->
		Reason
	end.

Важно отметить, что в Erlang все переменные — неизменны! Поэтому сначала приходится получать Address, а затем измененное состояние этой переменной присваивать NewAddress.

Первая функция делает тоже самое, что и функция show, вторая обновляет информацию в БД после нажатия кнопки Submit в форме.

Добавляем эту самую форму edit.html:

   

   
   


		{% if address %}


		{% endif %}
		

First name




Last name




City




Address1




Address2




State




Country




Active




		Submit
	

  

Ну вот собственно и все, наш CRUD готов.

Дополнение

Пока писал статью, успел прикрутить логин, регистрацию, список зарегистрированных пользователей, чат, валидацию ввода, а также админку (весь код сайта лежит на github, ссылка в разделе Ресурсы).

Чат без всяких наворотов, исключительно для теста и все еще содержит баги, особенно при работе под IE, поэтому специально для него я запретил логин, иначе он вызывает некоторые проблемы. Чатиться с ним можно, сервер не падает, но не комфортно. У меня задача показать работу Erlang, а не проблемы Ajax в IE решать.

Админку можно установить на любой новый сайт, там работы минут на 5.

А также поигрался с шаблонами. В итоге у меня получился один мастер-шаблон, который выглядит вот так:

    


    {% block res %} {% endblock %}




		{% if person %}
			Hello, {{person.name}}
			(Quick, Log Me Out!)
			
		{% endif %}
		Your IP: {{ip}}
	


	  {% block content %}{% endblock %}
	

И вот так теперь выглядит мой show.html:

{% extends "layout/application.html" %}

{% block title %}My addressbook{% endblock %}
{% block content %}

	{% if address %}


	{% endif %}
	

First name
{{address.firstname}}


Last name
{{address.lastname}}


City
{{address.city}}


Address1
{{address.address1}}


Address2
{{address.address2}}


State
{{address.state}}


Country
{{address.country}}


Modification time
{{address.modification_time}}


Creation time
{{address.creation_time}}


Active
{{address.active}}


{% endblock %}

Получается один каркас и разный контент.

Подробнее о Django шаблонах можно почитать на официальном сайте, ссылка есть в Ресурсах ниже.

Еще ChicagoBoss имеет в своем арсенале свои собственные шаблоны. Немного ниформации о них можно найти на официальном сайте. Там ничего сложного нет. Просто замена часто используемого кода тегами. Ну и еще некоторые плюшки.

Итоги

Здесь будут итоги работы сервера по прошествии двух дней.

Ресурсы

Ссылка на тестовый сайт

Ссылка на исходники

Официальный веб-сайт ChicagoBoss. На этом же сайте вы найдете API документацию, ссылки на Wiki, обучение работы с фреймворком.

Официальный веб-сайт Erlang

Русское сообщество Erlang

Отличный сайт для изучения Erlang

Erlang документация

Erlang solutions. Отсюда можно скачать нужную версию Erlang.

Обучающее видео от Эвана: эпизод 1, эпизод 2, эпизод 3

Различия между Ruby on Rails и ChicagoBoss

Сравнение Nodejs и Erlang

How to serve a million users!

The Django Template language. Система шаблонов Django.

ChicagoBoss Google Group

© Habrahabr.ru

© Habrahabr.ru

© Habrahabr.ru

Mono и новые стеки

Мы импортировали копию дерева GIT с Codeplex в GitHub’s Mono organization в модуль aspnetwebstack.

Модуль Mono на данный момент имеет зависимость от модуля aspnetwebstack, так что когда вы в следующий раз выполните команду autogen.sh, то получите полную копию aspnetwebstack.

Также, с сегодняшнего дня мы заменили нашу реализацию System.Json (которая, изначально, была сделана для Moonlight) реализацией от Microsoft.

Другие библиотеки, такие как Razor будут следующими, т.к. по сути их импортирование тривиально. Однако есть проблема: ASP.NET MVC 4 сейчас зависит от нашей реализации стека ASP.NET, в которой необходимо доделать поддержку асинхронности.

Наша копия на github будет содержать главным образом изменения, направленные на интеграцию стека с Mono. Если мы будем делать какие-либо изменения в интеграции, мы будем отдавать код напрямую в Microsoft, чтобы тот включил его в проект aspnetwebstack.

Расширение Mono’s ASP.NET Engine

Новая версия движка ASP.NET поддерживает асинхронное программирование C# 5.0 и это изменение требует поддержки со стороны ядра ASP.NET

На текущий момент мы не ожидаем что кто-нибудь будет работать над расширением функционала ядра ASP.NET, однако вы можете посоветовать новых и полных энтузиазма разработчиков, которые любят асинхронное программирование, чтобы сделать эти возможности в Моно

© Habrahabr.ru

© Habrahabr.ru

В прошлой статье мы писали простенький эмулятор терминала на PHP. Я думаю, теперь время написать что-нибудь более серьезное, на вебсокетах. Какой язык использовать для работы с вебсокетами..? Питон..? Руби..? JavaScript..? Нет! Раз уж зарелизился Go 1, давайте на нём и напишем . Я постараюсь не повторяться и не писать сюда целиком код. Я приведу лишь интересные, на моей взгляд, фрагменты.

Демо

Как и в прошлый раз, я не готов вам предоставить доступ к какому-либо серверу, поэтому я ограничусь видео (хостовая ОС — FreeBSD):



Исходный код веб-терминала доступен на гитхабе. Компилировать вебсокет-демон необходимо самостоятельно (командой go build -o ws) — это сделано в качестве небольшой защиты от «скрипт киддисов». Если кто-нибудь захочет выложить интерактивное демо терминала, буду очень признателен, бинарник для демона могу прислать отдельно.

Ингредиенты

Итак, нам понадобятся:

• Установленный компилятор языка Go 1
• Библиотека websocket (go get code.google.com/p/go.net/websocket)
• Браузер, поддерживающий последнюю спецификацию Websocket (например последние Firefox и Chrome)
• Любой веб-сервер с PHP (для автоматического запуска демона)

Пишем вебсокет-демон

В нашем демоне будет объединен вебсокет-сервер и эмулятор псевдотерминала. Несмотря на то, что нативной поддержки работы с псевдотерминалами в Go нет, этот язык легко интегрируется с Си, поэтому мы будем использовать соответствующие вызовы на Си для непосредственной работы с псевдотерминалом.

Работа с вебсокетами

package main
import (
	"code.google.com/p/go.net/websocket"
	"http"
	"log"
)
// наша функция-обработчик соединений
func PtyServer(ws *websocket.Conn) {
// ws — это название переменной типа *websocket.Conn, поддерживает
// простые вызовы Read() и Write() для чтения/записи в сокет
}

func main() {
	http.Handle("/ws", websocket.Handler(PtyServer)) // обрабатываем запросы на "/ws" как вебсокет
	log.Fatal(http.ListenAndServe(":12345", nil)) // слушаем на порту 12345
}

Работа с псевдотерминалом

Напишем обвязку для forkpty() и ioctl() (в ioctl() мы будем менять размеры «окна» терминала): Go хоть и неплохо интегрируется с Си, но не понимает, что pid_t и int — это одно и то же, а также не умеет работать с переменным количеством параметров в функциях на Си.

package main
/*
#cgo LDFLAGS: -lutil
#include 
#include 
#...зависимые от системы заголовки и флаги...
int goForkpty(int *amaster, struct winsize *winp) {
	return forkpty(amaster, NULL, NULL, winp);
}
int goChangeWinsz(int fd, struct winsize *winp) {
	return ioctl(fd, TIOCSWINSZ, winp);
}
*/
import "C"

В обработчике это используем:

func PtyServer(ws *websocket.Conn) {
	cols, rows := 80, 24
	var winsz = new(C.struct_winsize)
	winsz.ws_row = C.ushort(rows);
	winsz.ws_col = C.ushort(cols);
	winsz.ws_xpixel = C.ushort(cols * 9);
	winsz.ws_ypixel = C.ushort(rows * 16);
	cpttyno := C.int(-1)
	pid := int(C.goForkpty(&cpttyno, winsz))
	pttyno := int(cpttyno)
	// ...
}

Общение между вебсокетом и псевдотерминалом

Дальше мы должны запустить, к примеру, bash и посылать вывод с соответствующего дескриптора (pttyno) в вебсокет, и наоборот, ввод с вебсокета посылать на вход pttyno — это просто. Проблема возникает тогда, когда к нам от псевдотерминала приходит незавершенная последовательность UTF-8. Мы можем читать с псевдотерминала только блоками (скажем, по 2 Кб) и конец блока может «разрезать» UTF-8 символ на 2 части — этот «обрезок» не должны посылать браузеру, иначе он просто проигнорирует этот фрагмент. Вот небольшой фрагмент кода, который корректно обрабатывает эту ситуацию:

for end = buflen - 1; end >= 0; end-- {
	if utf8.RuneStart(buf[end]) {
		ch, width := utf8.DecodeRune(buf[end:buflen])
		if ch != utf8.RuneError {
			end += width
		}
		break
	}
}

Мы должны найти в конце буфера (buf) байт, который может служить началом UTF-8 символа (в терминологии Go — rune), после чего посмотреть, цел ли этот символ. Если с последним символом всё хорошо, то возвращаем «конец» буфера обратно, иначе — уменьшаем размер буфера так, чтобы там остались только целые символы.

Отображаем вывод с псевдотерминала в браузер

Сначала для отображения вывода я использовал JSLinux, но его автор не разрешает модификацию и распространение кода своих библиотек, поэтому давайте возьмем библиотеку selectel/pyte, написанную товарищами из Селектела… Погодите, она на питоне ! Ещё одна зависимость нам ни к чему, давайте перепишем её на Javascript ! Порт с питона не идеален, к тому же я не особый знаток питона, но свою работу оно выполняет — Midnight Commander запускается и работает без проблем.

Принимаем ввод пользователя

Для того, чтобы принимать пользовательский ввод, я всё же заимствовал некоторое количество кода у автора JSLinux, основные принципы описаны здесь. Я также добавил возможность вставить какой-нибудь текст в поле ввода внизу (например, пароли) и добавил маппинги для клавиш F1 — F12, а также для Alt + (стрелочка налево/направо). Как оказалось, значения вводимых символов для F-клавиш зависят от переменной окружения $TERM и для vt100 вообще не определены, поскольку в VT100 их не было на клавиатуре . Поскольку для вывода используется pyte, переменная окружения $TERM должна быть равна linux, поэтому и маппинги этих клавиш мы будем использовать для этого терминала.

Запускаем демона «по требованию»

Я реализовал вебсокет-демон таким образом, что он выходит через минуту после последнего коннекта, поэтому было бы удобно, если бы скрипт сам запускал вебсокет-демона, когда мы открываем страничку с терминалом. Код на PHP для этого очень простой:

>ws.log 2>&1 &');

Если вы не знаете, что такое exec, я объясню: это специальная builtin-команда в любых UNIX шеллах, которая заставляет shell заменить себя на вызываемый процесс. То есть, у нас не будет висеть «лишний» процесс sh -c ./ws ....

Моменты, о которых я не рассказал

Я не рассказал о следующих деталях в реализации:

• протокол общения с клиентом был немного усложнен для поддержки ресайза окна, но появился баг с вводом русских букв
• вебсокет-демон защищен паролем, который генерируется автоматически при запуске и используется при соединении
• используется свой bashrc, чтобы установить нужные настройки терминала
• поскольку на сервере не происходит никакой отрисовки, а только посылаются байты, демон нагружает сервер сравнимо с sshd (т.е. загрузка CPU близка к нулю)
• реализация pyte на javascript работает исключительно быстро: нет видимой задержки при старте Midnight Commander, пропускная способность составляет несколько тысяч строк текста в секунду
• при закрытии окна браузера сессия корректно завершается
• один демон может обслуживать много клиентов одновременно без проблем
• за счёт использования тега

Проект на github

Для интересующихся, повторю ссылки на гитхаб:

github.com/YuriyNasretdinov/WebTerm — эмулятор терминала, о котором я рассказал в статье

github.com/YuriyNasretdinov/pyte — моя реализация библиотеки selectel/pyte на Javascript (не принятая разработчиками, к сожалению)

© Habrahabr.ru

В прошлой статье, вот ссылочка, я обещал выложить плагин по «ползункам», доработав его учитывая большинство комментариев получилось «это»:



Из-за нехватки времени фичи для touch устройств были вырезаны, так что пока только для владельцев mouse устройств. Статью публикую для критики, баг-репортов ну и конечно же ваших пожеланий.

jQuery Plugin — Scroll Sliders

Как всегда мои наработки имеют кучу настроек, так что начну пожалуй с них. Вот, немалый список:

slider	Default: true	Вкл/Выкл функционал ползунка
sliderOuter	Default: true	Вкл/Выкл функционал блока вокруг ползунка (при нажатии на блок в котором расположен ползунок, ползунок «телепортируется» к нам)
speedMove	Default: 200	Время прохождения 1го элемента при использовании ползунка с его максимальным отклонением
speedMoveScroller	Default: 300	Временно не используется
speedMoveControl	Default: 250	Время прохождения 1го элемента при использовании кнопок вперед/назад
speedMoveWheel	Default: 150	Время прохождения 1го элемента при прокрутке колесом мыши
speedRevert	Default: 220	Время возврата ползунка в среднее положение
speedAnimation	Default: 13	Интервал для выполнения анимаций
revert	Default: true	Вкл/Выкл возвращение ползунка в центральное положение
sliderInverse	Default: false	Вкл/Выкл инверсию для ползунка
sliderOuterDiv	Default: ‘.scroll-outer’	Блок-рамка для ползунка
sliderToddlerDiv	Default: ‘.scroll-toddler’	Блок-ползунок… хм забавное описание
control	Default: true	Вкл/Выкл функционал для кнопок управления
controlNext	Default: ‘.scroll-control .next’	Блок-кнопка управления «вперед»
controlPrev	Default: ‘.scroll-control .prev’	Блок-кнопка управления «назад»
controlRevert	Default: false	Вкл/Выкл инверсию для кнопок управления
scroller	Default: true	Вкл/Выкл функционал скролла
scrollerOuter	Default: true	Вкл/Выкл функционал вокруг скролла (при нажатии на блок в котором расположен скролл, скролла «телепортируется» к нам)
mouseWheel	Default: true	Вкл/Выкл функционал колесика мыши
mouseWheelRevert	Default: false	Вкл/Выкл инверсию для колесика мыши
mouseWheelsDiv	Default: ‘.scroll-positions, .block-for-scroll’	Блоки в которых будет активен функционал скролла
scrollerOuterDiv	Default: ‘.scroll-positions’	Блок скролла
scrollerToddlerDiv	Default: ‘.scroll-positioner’	Блок-указатель скролла
slideDiv	Default: ‘.block-for-scroll’	Блок который будет имитировать наши перемещения им мы и будем орудовать
slideOuterDiv	Default: ‘.block-outer	Рамка внутри которой всё будет происходит
slideWidthDiv	Default: ‘.block-for-scroll-inter’	Сам блок внутри которого само содержимое
slideLiClass	Default: ‘li.li’	элемент внутрених списков

Использовать плагин довольно таки просто, он имеет только один метод scrollsliders:

$(‘.my-scrolled-div’).scrollsliders();

или с параметрами ( можно и больше ^_^ ):

$(‘.my-scrolled-div’).scrollsliders({

speedMove: 200,

speedMoveScroller: 300,

speedMoveControl: 250,

speedMoveWheel: 150,

speedMoveRevert: 220,

speedRevert: 300

});

Скелет для этого тоже довольно таки прост:

<div class=«my-scrolled-div»>

<div class=«scroll-positions»>

<div class=«scroll-positioner»>

<div class=«scroll-positioner-inter»>

</div>

</div>

</div>

<div class=«block-outer»>

<div class=«block-for-scroll»>

<div class=«block-for-scroll-inter»>

<ul class=«style-ul»>

<li class=«li li-n-1″>li#1 inter text</li>

…

<li class=«li li-n-24″>li#24 inter text</li>

</ul>

</div>

</div>

</div>

<div class=«scroll-div»>

<div class=«scroll-outer»>

<div class=«scroll-toddler»>

</div>

</div>

<div class=«scroll-control»>

<div class=«prev»>

</div>

<div class=«next»>

</div>

</div>

</div>

<div class=«block-outer»>

<div class=«block-for-scroll»>

<div class=«block-for-scroll-inter»>

<ul class=«style-ul»>

<li class=«li li-n-1″>li#1 inter text</li>

…

<li class=«li li-n-24″>li#24 inter text</li>

</ul>

</div>

</div>

</div>

<div class=«scroll-positions»>

<div class=«scroll-positioner»>

<div class=«scroll-positioner-inter»>

</div>

</div>

</div>

</div>

Также и CSS:

*

{

margin:0px;

padding:0px;

}

 

debug{

position:fixed;

display:block;

color:#fff;

background:#000;

padding:15px;

top:15px;

left:15px;

}

 

.block-outer

{

position:relative;

height:200px;

width:800px;

margin:0 auto;

border:2px dashed blue;

overflow:hidden;

}

.scroll-positions{

position:relative;

width:800px;

margin:0 auto;

margin-top:10px;

margin-bottom:10px;

height:15px;

border:1px solid #aaa;

background:#eee;

}

.scroll-positions .scroll-positioner{

height:15px;

width:50px;

background:#ccc;

position:absolute;

top:0px;

left:0px;

cursor:pointer;

}

.block-outer .block-for-scroll

{

position:absolute;

left:0px;

top:0px;

height:100%;

width:30000px;

}

.block-outer .block-for-scroll .block-for-scroll-inter

{

position:absolute;

}

 

.block-for-scroll .style-ul

{

list-style:none;

height:100%;

}

 

.block-for-scroll .style-ul .li{

position:relative;

float:left;

margin:5px;

height:186px;

border:2px dotted red;

width:186px;

}

 

.scroll-div

{

position:relative;

margin:20px;

}

.scroll-control{

position:relative;

width:600px;

height:0px;

margin:0 auto;

}

.scroll-control .next{

position:absolute;

right:60px;

top:-30px;

height:40px;

width:40px;

background:blue;

cursor:pointer;

}

.scroll-control .prev{

position:absolute;

left:60px;

top:-30px;

height:40px;

width:40px;

background:blue;

cursor:pointer;

}

.scroll-div .scroll-outer

{

position:relative;

width:300px;

height:20px;

margin:0 auto;

background:gray;

}

.scroll-div .scroll-outer .scroll-toddler

{

position:absolute;

height:20px;

width:20px;

left:140px;

top:0px;

background:blue;

cursor:pointer;

}

 

После применения скелета и таблицы стилей должны получить что-то наподобие:

Заключение

Вот такие вот пироги с котятами, их кушаешь — они мяукают.

Скелет тут, демо версия тут, скачать тут. Архивом можно тут. Деньги слать сюда, утка

С Ув. buna1991.

© Habrahabr.ru

А теперь о самом главном — pushBridge.IO PHP Library

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

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

Библиотека разделена на две части — базовый класс отвечает за инициализацию нужного адаптера, обрабатывает сообщение, при необходимости, сериализирует его. Для этого я использовал класс Zend_Serializer, таким образом, поддерживаются все его форматы — от обычного Json до экзотического Wddx.

За работу с конкретным сервисов отвечает класс адаптера, который, при необходимости, подключает родную библиотеку. Пока родные классы используются только для Pusher-а и PubNub-а, ввиду того, что сервисы предоставляют свои специфические функции, которые пока не перенесены. Зато после инициализации вы всегда можете продолжить работать напрямую, просто вызвав метод getConnection().

Я так же попытался как-то унифицировать данные для авторизации. Одни сервисы используют app_id и секретный ключ, другие именуют их publish и subscribe/public ключами и т.п. Потому я попытался свести их к минимальному множеству и сохранить одно наименование для всех сервисов:

• appId — обычно это ид приложения или API-key, уникальный идентификатор аккаунта или приложения
• authKey — секретный ключ, дающий право на публикацию данных
• secretKey — пароль или другой секретный ключ для доступа к аккаунту
• readKey — публичный ключ для подключения в качестве клиента и чтения данных
• emailKey — логин пользователя в виде e-mail (пока это исключительно для x-Stream.ly)

Для работы с библиотекой достаточно трех строк:

1. Инициализация и подключение.

$push = new pushBridge_IO( [ Adapter ], [serializer] );

Первым параметром идет экземпляр адаптера для нужного вам сервиса, например:

new pushBridge_Adapter_Pusher(Array('appId' => 'Your app Id', 'authKey' => 'Your key', 'secretKey' => 'Your secret key', 'debug' => true));



Обычно, достаточно только данных для авторизации, набор которых специфичен для сервиса. Но библиотека, в отличие от родных классов, позволяет гибко управлять методами подключения, используя сетевой стек от Zend_Http. Для запросов можно использовать cURL, напрямую сокеты или адаптер для работы через прокси. По умолчанию используется cURL, но если вам надо, передайте в качестве параметра httpAdapter название нужно адаптера, а в httpAdapterConfig — любые его настройки согласно документации по ZF (например, вот здесь). Каюсь, в этом моменте есть еще баг в текущей реализации библиотеки, пока опции, заданные пользователем для адаптера, не используются, это будет исправлено в следующей версии (на днях).

Так как разные сервисы требуют (или наоборот) разные методы, можно задать в параметре method каким образом адаптер будет подключаться к серверу. Обычно это GET, но иногда сервисы понимают только POST. Адаптер это учитывает, но вы можете переопределить этот параметр.

Библиотека вставляет свой кастомный хедер в запрос, X-Powered-By, идентифицируя себя, при желании это можно отключить для экономии сетевого трафика или просто из принципа.

Второй параметр — сериализатор, который будет обрабатывать сообщение. Все сервисы принимают или JSON, или (некоторые, например, Partcl) просто строку, без преобразования. Изначально там json, используя класс Zend_Serializer, однако вы можете переопределить на любой другой. Достаточно передать в качестве второго параметра или строку с названием сериализатора (сейчас поддерживаем: json, php и pickle) или сразу экземпляр класса Zend_Serializer с необходимыми вам опциями.

Примеры:

Partcl:

$push = new pushBridge_IO( new pushBridge_Adapter_Partcl(Array('secretKey' => 'Your secret key')) );

Pusher:

$push = new pushBridge_IO( new pushBridge_Adapter_Pusher(Array('appId' => 'Your app Id', 'authKey' => 'Your key', 'secretKey' => 'Your secret key', 'debug' => true)) );

Pubnub:

$push = new pushBridge_IO( new pushBridge_Adapter_Pubnub(Array('readKey' => 'Your subscribe key', 'authKey' => 'Your publish key', 'secretKey' => ' Your secret key')) );

BeaconPush:

$push = new pushBridge_IO( new pushBridge_Adapter_Beaconpush(Array('authKey' => 'Your API Key', 'secretKey' => 'Your secret key')) );

А во пример с кастомным сериализатором:

$push = new pushBridge_IO( new pushBridge_Adapter_Partcl(Array('secretKey' => ' Your secret key')), ‘php’ );

или

$push = new pushBridge_IO( new pushBridge_Adapter_Partcl(Array('secretKey' => 'Your secret key')), Zend_Serializer::factory('Wddx', Array(‘comment’ => ‘Powered by ZF+pushBridge.IO’) );

2. Просто отправляем сообщение.

На самом деле все не так и просто. Сервисы очень по разному работают с сообщениями. Самое простое — это модель канал->сообщение (или тег -> сообщение), другие же вносят новый уровень — канал -> событие -> сообщение. При этом только partcl очень толерантно относиться к содержимому сообщения, для него это просто строка, а ее понимание перекладываться полностью на клиента. Другие требуют специального оборачивания сообщений в json-структуры. Ни один из сервисов не поддерживает массовую отправку сообщений, когда в одном запросе можно было бы публиковать данные в разные каналы или несколько разных сообщений и событий в один канал. Этот момент мы уже учли и в следующей версии нашего сервиса Partcl.com такая возможность будет, параллельно в библиотеке появиться и эмуляция этого функционала для всех остальных (справедливости ради стоит сказать, что такой функционал реализован в классе для BeaconPush, но не портирован в мою библиотеку).

Общий метод отправки имеет такой вид:

$push->send( 'сообщение', 'channel', 'config' );

В метод адаптера попадает уже преобразованная строка, так что он гарантированно получает данные и они нечто большее, чем пустая строка. Однако, если сервис этого требует, адаптер сформирует поверх данных сообщения необходимую Json-структуру.

Если в сервисе используются каналы, то второй параметр это строка (или массив) каналов, куда следует отправить сообщение. если каналов нет, это ид тега или другой ид.

При необходимости задать код события следует использовать конфиг — третий параметр всегда массив. Событие задается в параметре event. Дополнительно можно отключить сериализацию, передав параметр serialize = false. Если сервис принимает, можно указать и дополнительные параметры сообщения, например флаг сохранения данных для X-Stream.ly или включить/отключить дебаг-режим для сообщения в Pusher-е.

Пример отправки простого сообщения:

Partcl:

$push->send('Hello world from pushBridge.IO', 'Your tag id', Array('serialize' => false));

Pusher:

$push->send('Hello world from pushBridge.IO', 'test_channel', Array('serialize' => false, 'event' => 'push_test', ‘debug’ => true));

Pubnub:

$push->send('Hello world from pushBridge.IO', 'my_channel');

x-Stream.ly:

$push->send('Hello world from pushBridge.IO', 'mychannel', Array('event' => 'my_event', ‘persisted’ => true));

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



Исходный код библиотеки и краткие примеры:github.com/aleksraiden/pushBridge.IO/tree/ServiceWrapper

В планах на ближайший релиз: исправление ошибок, унификация метода send, поддержка публикации сразу нескольких переменный, реализация метода чтения данных, а также поднятие сайта проекта на домене pushcloudapi.com. Буду благодарен за замечания и дополнения.

© Habrahabr.ru