자기소개

1980년 라는 밴드의 기술적인 일을 하고 있습니다.
평상시는 보통의 사이트 만들거나 하고 있습니다.

정적 사이트와 현실적인 밴드 연주를 WebSocket을 사용하여 연동

음식 축제 a.k.a foodman이라는 천재의 사람이 게라고 말하고 있는 만큼의 곡을 만들었으므로, 라이브중에 게라고 말할 때마다 사이트내에 게를 날렸습니다.
아래에 개념도를 나타냅니다. 감사합니다.
※화상은 구상 단계의 것으로 일부 본래의 사양과 다른 부분이 있습니다

식품 씨의 Ableton Live 프로젝트 내에에서 게라고 말할 만큼의 트럭이 있었으므로, m4l로 어택을 취한다

어택마다 EC2 인스턴스에 UDP를 보냅니다

S3에있는 정적 사이트와 EC2 인스턴스를 WebSocket으로 연결합니다.

m4l에서 보낸 타이밍에 WebSocket으로 브라우저에 이벤트를 던집니다.

사이트 열람자 각자의 브라우저로 게가 날아간다

Max/MSP, Python, JavaScript 당 구현했습니다.
덧붙여서 실제로 사이트 내에서 게를 날린 것은 동료의 말 선생님이므로, 프런트에 대해서는 나는 그다지 아무것도 하고 있지 않습니다.
다시 말하지만 말이 게를 날렸습니다.
그건 그렇고, Three.js를 사용했다고 말했습니다.

도전과 학습

WebSocket 또는 Server-Sent Events

이번은 서버로부터 일방적으로 이벤트를 보내는 단방향 통신이므로 Server-Sent Events(이하 SSE)로 좋았습니다만, http프로토콜에 준하고 있기 때문에 여러가지 귀찮다든지를 읽고 WebSocket를 채용했습니다.
특히 검증한 것은 아니었기 때문에, SSE도 그중 시험해 보고 싶습니다.
덧붙여서 WebSocket은 상당히 지연 시간이 적어서 좋았습니다.

EC2 인스턴스를 SSL로 만들 때 이끼

프런트는 CloudFront로 SSL화하고 있었지만, EC2의 쪽도 SSL화하지 않으면 WebSocket은 할 수 없는 것을 알았기 때문에, 여러가지 조사했습니다만, 결국 할 수 없어 프런트의 SSL를 끊는다고 하는 황업에 나온 네.
너무 EC2를 공개하는 형태로 사용한 적이 없기 때문에, 그 근처의 지견이 까마귀이므로 공부하고 싶습니다.

인스턴스 유형 정보

개발중은 t2.micro, 라이브중은 t2.medium로 하고 있었습니다만, 얼마나의 부하가 있었는지는 수수께끼입니다.
이번 제대로 계측하는 것이 과제입니다.

요약

WebSocket은 더 부진한 면으로 사용하면 재미있는 것 많이 할 수 있는 예감이 있었습니다.
이번 구조도 라이브 연출의 외측이라는 점에서 할 수 있는 것 같아요.
연말 연시 축하하고 싶은 분위기의 연출로서 게를 날리고 싶은 분은 상담해 주세요.
1980YEN 3rd앨범 'FAST FOOD' 잘 부탁드립니다.