Category: 創意編程

文：駱若瑀 近期融聲創意的作品多圍繞著「網路傳輸」，包括《無重力星空》、《地衣荒物》、紀柏豪的《距離之歌》等，都使用了網路的特性，讓觀者使用手機即時參與、影響現場的作品。今天就來分享如何簡單做到網路傳輸的功能！ 先來看看「示範範例」的效果： 上圖中，點選任意網頁的任意位置，都會觸發所有開著的網頁隨機切換背景色。 咦？不是只有一個網頁被點到嗎？怎麼有辦法讓開著的網頁都一起變色？ 這個範例的概念和現代人所熟悉的「通訊軟體」非常相似，我們在使用通訊軟體（Messenger、Line）的時候，會有「傳送的對象」（朋友A、群組B）以及「傳送的資訊」（訊息、圖片等等），而對範例而言，當按下網頁，被按下的網頁就會透過網路傳輸將「背景顏色」這個資訊傳給「開啟的網頁」。這時候，所有被開啟的網頁便會接收到顏色的資訊囉。 暸解大概念後，直接進入實作階段！ 首先，在 html 的 header 中，加入 socket.io 的函式庫。socket io 是一套函式庫，實作了網路封包傳送的細節，讓我們能夠輕鬆地在網頁上做到即時的雙向傳輸。 html <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js" ></script > 並在 javascript 中建立和伺服器的連線： js var socket = io('https://xxxxxxxx'); 等等，伺服器又是什麼？ 雖然範例看起來是網頁間的傳輸，事實上，網頁之間還有伺服器這個中介者。可以暫時把伺服器想像成一台一直開著的電腦，只要知道這台電腦在哪裡，網頁就可以與伺服器互傳資料。當網頁 A 要傳送資訊給網頁 B 時，網頁 A 會先告訴伺服器，他想要跟誰溝通，再由伺服器轉達這個資訊給 B。 在上面程式中，io()括弧中填入的便是伺服器的位址。這次範例使用的伺服器程式在『此處』，下一篇文章我們會接續介紹如何架設這裡用到的伺服器。 （還不會架設伺服器的話，可以暫時使用 https://osc-server.glitch.me/ 網址。但這個網址可能不久就會被移除。） 接著，加入「按下」網頁的事件： …