?room s

src/public/index.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
         <script>
             window.addEventListener("load", function(evt) {
                 var output = document.getElementById("output");
@@ -11,42 +12,78 @@
                 var ws;
 
                 var print = function(message) {
-                    var d = document.createElement("div");
+                    var before = output.innerHTML.split("<br>");
-                    d.textContent = message;
+                    before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`);
-                    output.appendChild(d);
+                    if (before.length > 20) {
-                    output.scroll(0, output.scrollHeight);
+                        before = before.slice(0, 20);
+                    }
+                    var after = before.join("<br>");
+                    output.innerHTML = after;
+                    output.scroll(0, 0);
                 };
 
-                ws = new WebSocket("ws://"+window.location.host+"/ws");
+                const synth = window.speechSynthesis;
+                const voices = synth.getVoices().sort(function (a, b) {
+                    const aname = a.name.toUpperCase();
+                    const bname = b.name.toUpperCase();
+
+                    if (aname < bname) {
+                        return -1;
+                    } else if (aname == bname) {
+                        return 0;
+                    } else {
+                        return +1;
+                    }
+                });
+                var voices_idx = 0;
+
+                {
+                    var ele = document.getElementById("voices");
+                    for(var i in voices) {
+                        var voice = voices[i];
+                        const opt = document.createElement("input");
+                        opt.type = "radio";
+                        opt.name = "voice";
+                        opt.id = `voices-${i}-${voice.name}`
+                        opt.value = i;
+
+                        const label = document.createElement("label");
+                        label.for = opt.id;
+                        label.textContent = voice.name;
+
+                        ele.appendChild(opt);
+                        ele.appendChild(label);
+                        ele.appendChild(document.createElement("br"));
+                    }
+                }
+
+                ws = new WebSocket("ws://"+window.location.host+"/ws"+window.location.search);
                 ws.onopen = function(evt) {
-                    print("OPEN");
+                    print("READY");
                 }
                 ws.onclose = function(evt) {
                     print("CLOSE");
                     ws = null;
                 }
                 ws.onmessage = function(evt) {
-                    const synth = window.speechSynthesis;
+                    console.log("evt.data:", evt.data)
-                    const voices = synth.getVoices().sort(function (a, b) {
+                    const data = JSON.parse(evt.data);
-                        const aname = a.name.toUpperCase();
-                        const bname = b.name.toUpperCase();
 
-                        if (aname < bname) {
+                    const utterThis = new SpeechSynthesisUtterance(data.Text);
-                            return -1;
-                        } else if (aname == bname) {
-                            return 0;
-                        } else {
-                            return +1;
-                        }
-                    });
-                    const idx = false ? 0 : voices.length-1;
 
-                    const utterThis = new SpeechSynthesisUtterance(evt.data);
+                    const idx = data.VoiceIdx || 0;
                     utterThis.voice = voices[idx];
-                    //utterThis.pitch = 10;
+
-                    //utterThis.rate = 10;
+                    if (data.Pitch) {
+                        utterThis.pitch = data.Pitch
+                    }
+
+                    if (data.Rate) {
+                        utterThis.rate = data.Rate
+                    }
+
                     window.speechSynthesis.speak(utterThis);
-                    print("RESPONSE: " + evt.data);
+                    print(data.Text);
                 }
                 ws.onerror = function(evt) {
                     print("ERROR: " + evt.data);
@@ -56,22 +93,65 @@
                     if (!ws || !input.value) {
                         return false;
                     }
-                    ws.send(JSON.stringify({
+
-                        "text": input.value
+                    var voiceIdx = "0";
-                    }));
+                    var voiceEles = document.getElementsByName("voice");
+                    for (var i = 0; i < voiceEles.length; i++)
+                        if (voiceEles[i].checked)
+                            voiceIdx = voiceEles[i].value;
+
+                    const data = JSON.stringify({
+                        "Text": input.value,
+                        "Pitch": Number.parseInt(document.getElementById("pitch").value, 10),
+                        "Rate": Number.parseFloat(document.getElementById("rate").value, 10),
+                        "VoiceIdx": Number.parseInt(voiceIdx, 10),
+                    });
+
+                    ws.send(data);
                     print("SENT: " + input.value);
                     input.value = "";
+                    if (document.getElementById("listen").checked) {
+                        ws.onmessage({data: data});
+                    }
                     return false;
                 };
             });
         </script>
+        <style>
+            #output > span {
+                opacity: 0.33;
+            }
+            #output > span:nth-child(1) {
+                opacity: 1;
+            }
+            #output > span:nth-child(2)
+            , #output > span:nth-child(3)
+            {
+                opacity: 0.66;
+            }
+        </style>
     </head>
     <body>
         <div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
-            <form style="flex-grow: 1;">
+            <div style="display: flex; flex-direction: column;">
-                <p><input id="input" type="text" value="" autofocus>
+                <form style="flex-grow: 1;">
-                <button id="send">Send</button>
+                    <p><input id="input" type="textarea" value="" autofocus style="width: 80%">
-            </form>
+                    <p>
+                    <button id="send">Send</button>
+                </form>
+                <div>
+                    <form id="voices"></form>
+
+                    <input id="pitch" type="number" value="0"/>
+                    <label for="pitch">pitch</label></br>
+
+                    <input id="rate" type="number" value="0"/>
+                    <label for="rate">rate</label></br>
+
+                    <input id="listen" type="checkbox" />
+                    <label for="listen">listen</label></br>
+                </div>
+            </div>
             <div id="output" style="flex-grow: 1; overflow-y: scroll;"></div>
         </div>
     </body>

src/server/message.go

@@ -1,5 +1,9 @@
 package server
 
 type message struct {
-	Text string
+	Text     string
+	Pitch    int
+	Rate     float64
+	VoiceIdx int
+	room     string
 }

src/server/server.go

@@ -31,10 +31,12 @@ func (s *Server) WS(w http.ResponseWriter, r *http.Request) error {
 	}
 	defer sess.Close()
 
+	log.Println("someone has joined", sess.room)
+	defer log.Println("someone has left", sess.room)
+
 	sess.cb = func(m message) error {
-		log.Printf("cbing to all other sessions %+v", m)
 		for i := range s.sessions {
-			if s.sessions[i].id != sess.id {
+			if s.sessions[i].id != sess.id && s.sessions[i].room == sess.room {
 				select {
 				case s.sessions[i].scatterc <- m:
 				case <-s.sessions[i].ctx.Done():

src/server/session.go

@@ -20,6 +20,7 @@ type session struct {
 	cb       func(message) error
 	id       string
 	scatterc chan (message)
+	room     string
 }
 
 var upgrader = websocket.Upgrader{}
@@ -34,6 +35,7 @@ func newSession(w http.ResponseWriter, r *http.Request, cb func(message) error)
 		cb:       cb,
 		id:       uuid.New().String(),
 		scatterc: make(chan message, 20),
+		room:     r.URL.Query().Get("room"),
 	}, err
 }
 
@@ -70,8 +72,8 @@ func (s *session) gather() {
 		if err := json.Unmarshal(msg, &m); err != nil {
 			return err
 		}
+		m.room = s.room
 
-		log.Printf("gathered %+v", m)
 		return s.cb(m)
 	})
 }
@@ -80,8 +82,8 @@ func (s *session) scatter() {
 	s.while(func() error {
 		select {
 		case m := <-s.scatterc:
-			log.Printf("scattering %+v", m)
+			b, _ := json.Marshal(m)
-			return s.ws.WriteMessage(1, []byte(m.Text))
+			return s.ws.WriteMessage(1, b)
 		case <-s.ctx.Done():
 			return s.ctx.Err()
 		}