test-socket-io/test_socket_chatserver_mm.html at master · rcmurray/test-socket-io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>

<!--
Sample of a socket-io messages from this page as received at Bazaar:

=== Initial connection ===
Message: 0{"token":"dead6753f8f7bebd03ca40ccd29e087b9b472195","agent":{"name":"fcdsp3","configuration":{"clientID":"ChatServer"}},"chat":{"id":"ope-learn-domain-ana-ucm5hl6q-room9070"},"user":{"id":100,"name":"OPEBot"}}

Message decoded by socket.io-parser:
{"type":0,"nsp":"/","data":{"token":"dead6753f8f7bebd03ca40ccd29e087b9b472195","agent":{"name":"fcdsp3","configuration":{"clientID":"ChatServer"}},"chat":{"id":"ope-learn-domain-ana-ucm5hl6q-room9070"},"user":{"id":100,"name":"OPEBot"}}}

=== Chat message ===
Message: 2["sendchat","multimodal:::true;%;from:::OPEBot;%;to:::group;%;speech:::Hi from ChatServer"]

Message decoded by socket.io-parser:
{"type":2,"nsp":"/","data":["sendchat","multimodal:::true;%;from:::OPEBot;%;to:::group;%;speech:::Hi from ChatServer"]}
 -->


<html>
  <head>
  </head>
  <body>
    <h2>Test send and receive with socket server</h2>
    <h3>Type a message and click "Submit".</h3>
    <form>
      <input autofocus id="input" />
      <input type="submit" value="Submit" />
    </form>
    <p id="received"></p>
    <p id="outcome"></p>
    <script src="./node_modules/object-hash/dist/object_hash.js"></script>
    <script src="./node_modules/socket.io/client-dist/socket.io.js"></script>
    <script>
      const transports = ['websocket', 'polling'];
      const token = objectHash(performance.now());
      const path = "/bazsocket/";

	  // Customize the following as appropriate.
	  // >>> Update ROOMNAME to a unique value for a fresh agent <<<
      const ENDPOINT = 'https://bazaar.lti.cs.cmu.edu';
//       const AGENTNAME = 'fcdsp3';
      const AGENTNAME = '15619p2';
      const CLIENTID = 'ChatServer';
      const ROOMNAME = 'ope-learn-domain-ana-ucm5hl6q-room9100';
      const USERID = 100;
      const USERNAME = 'OPEBot';

      const auth = {
        token,
        agent: {
        	name: AGENTNAME,
        	configuration: {
        		clientID: CLIENTID
        	}
        },
        chat: {
        	id: ROOMNAME
        },
        user: {
        	id: USERID,
        	name: USERNAME
        }
      };
      console.log('token', token);
      console.log('endpoint', ENDPOINT);

      const socket = io(ENDPOINT, {
        transports,
        path,
        auth
      });;

      const form = document.querySelector('form');
      const input = document.getElementById('input');
      const outcome = document.getElementById('outcome');
      const submit = document.querySelector('input[type=submit]');
      const received = document.getElementById('received');


	  const MM_PREFIX = "multimodal:::true;%;from:::"
	  const MM_MIDDLE = ";%;to:::group;%;speech:::"
      const onSubmit = () => {
        const speech = input.value;
        message = MM_PREFIX + USERNAME + MM_MIDDLE + speech
        socket.emit('sendchat', message);
      };

      form.onsubmit = event => {
        onSubmit();
        return false;
      };


    function getMultimodalValue(field, data)
    {
    	var fields = data.split(";%;");
    	var numFields = fields.length;
    	var i = 0;
    	var value = "";
    	while (i < numFields) {
    		var fieldWithValue = fields[i].split(":::");
    		i =	i + 1;
    		if (fieldWithValue[0] == field) {
    			value = fieldWithValue[1];
    			i = numFields;
    		}
    	}
    	return value;
    }


    socket.on('updatechat', function (username, message)
	{
		if (data.search("multimodal:::true;%;") > -1) {
			username = getMultimodalValue("from",data);
			speech = getMultimodalValue("speech",data);
		}
        received.innerHTML = speech;
    });


    </script>
  </body>
</html>