add wordballoons to agents on the webapp
(i know they will be broken, this is just to give an environment for them to actually be used in)
This commit is contained in:
parent
22f0d4a008
commit
396ef67c78
|
|
@ -1,186 +1,204 @@
|
||||||
import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
|
import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
|
||||||
import { MSAgentAddUserMessage, MSAgentChatMessage, MSAgentInitMessage, MSAgentJoinMessage, MSAgentProtocolMessage, MSAgentProtocolMessageType, MSAgentRemoveUserMessage, MSAgentTalkMessage } from '@msagent-chat/protocol';
|
import {
|
||||||
|
MSAgentAddUserMessage,
|
||||||
|
MSAgentChatMessage,
|
||||||
|
MSAgentInitMessage,
|
||||||
|
MSAgentJoinMessage,
|
||||||
|
MSAgentProtocolMessage,
|
||||||
|
MSAgentProtocolMessageType,
|
||||||
|
MSAgentRemoveUserMessage,
|
||||||
|
MSAgentTalkMessage
|
||||||
|
} from '@msagent-chat/protocol';
|
||||||
import { User } from './user';
|
import { User } from './user';
|
||||||
import { agentCreateCharacterFromUrl } from '@msagent-chat/msagent.js';
|
import { agentCreateCharacterFromUrl } from '@msagent-chat/msagent.js';
|
||||||
|
|
||||||
export interface MSAgentClientEvents {
|
export interface MSAgentClientEvents {
|
||||||
close: () => void;
|
close: () => void;
|
||||||
join: () => void;
|
join: () => void;
|
||||||
adduser: (user: User) => void;
|
adduser: (user: User) => void;
|
||||||
remuser: (user: User) => void;
|
remuser: (user: User) => void;
|
||||||
chat: (user: User, msg: string) => void;
|
chat: (user: User, msg: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface APIAgentInfo {
|
export interface APIAgentInfo {
|
||||||
friendlyName: string;
|
friendlyName: string;
|
||||||
filename: string;
|
filename: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class MSAgentClient {
|
export class MSAgentClient {
|
||||||
private url: string;
|
private url: string;
|
||||||
private socket: WebSocket | null;
|
private socket: WebSocket | null;
|
||||||
private events: Emitter;
|
private events: Emitter;
|
||||||
private users: User[];
|
private users: User[];
|
||||||
private playingAudio: Map<string, HTMLAudioElement> = new Map();
|
private playingAudio: Map<string, HTMLAudioElement> = new Map();
|
||||||
private charlimit: number = 0;
|
private charlimit: number = 0;
|
||||||
|
|
||||||
private username: string | null = null;
|
private username: string | null = null;
|
||||||
private agentContainer: HTMLElement;
|
private agentContainer: HTMLElement;
|
||||||
private agent: string | null = null;
|
private agent: string | null = null;
|
||||||
|
|
||||||
constructor(url: string, agentContainer: HTMLElement) {
|
constructor(url: string, agentContainer: HTMLElement) {
|
||||||
this.url = url;
|
this.url = url;
|
||||||
this.agentContainer = agentContainer;
|
this.agentContainer = agentContainer;
|
||||||
this.socket = null;
|
this.socket = null;
|
||||||
this.events = createNanoEvents();
|
this.events = createNanoEvents();
|
||||||
this.users = [];
|
this.users = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
on<E extends keyof MSAgentClientEvents>(event: E, callback: MSAgentClientEvents[E]): Unsubscribe {
|
on<E extends keyof MSAgentClientEvents>(event: E, callback: MSAgentClientEvents[E]): Unsubscribe {
|
||||||
return this.events.on(event, callback);
|
return this.events.on(event, callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
async getAgents() {
|
async getAgents() {
|
||||||
let res = await fetch(this.url + "/api/agents");
|
let res = await fetch(this.url + '/api/agents');
|
||||||
return await res.json() as APIAgentInfo[];
|
return (await res.json()) as APIAgentInfo[];
|
||||||
}
|
}
|
||||||
|
|
||||||
connect(): Promise<void> {
|
connect(): Promise<void> {
|
||||||
return new Promise(res => {
|
return new Promise((res) => {
|
||||||
let url = new URL(this.url);
|
let url = new URL(this.url);
|
||||||
switch (url.protocol) {
|
switch (url.protocol) {
|
||||||
case "http:":
|
case 'http:':
|
||||||
url.protocol = "ws:";
|
url.protocol = 'ws:';
|
||||||
break;
|
break;
|
||||||
case "https:":
|
case 'https:':
|
||||||
url.protocol = "wss:";
|
url.protocol = 'wss:';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
throw new Error(`Unknown protocol ${url.protocol}`);
|
throw new Error(`Unknown protocol ${url.protocol}`);
|
||||||
}
|
}
|
||||||
url.pathname = "/api/socket"
|
url.pathname = '/api/socket';
|
||||||
this.socket = new WebSocket(url);
|
this.socket = new WebSocket(url);
|
||||||
this.socket.addEventListener('open', () => res());
|
this.socket.addEventListener('open', () => res());
|
||||||
this.socket.addEventListener('message', e => {
|
this.socket.addEventListener('message', (e) => {
|
||||||
if (e.data instanceof ArrayBuffer) {
|
if (e.data instanceof ArrayBuffer) {
|
||||||
// server should not send binary
|
// server should not send binary
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.handleMessage(e.data);
|
this.handleMessage(e.data);
|
||||||
});
|
});
|
||||||
this.socket.addEventListener('close', () => {
|
this.socket.addEventListener('close', () => {
|
||||||
this.events.emit('close');
|
this.events.emit('close');
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
send(msg: MSAgentProtocolMessage) {
|
send(msg: MSAgentProtocolMessage) {
|
||||||
if (this.socket === null || this.socket.readyState !== this.socket.OPEN) {
|
if (this.socket === null || this.socket.readyState !== this.socket.OPEN) {
|
||||||
console.error("Tried to send data on a closed or uninitialized socket");
|
console.error('Tried to send data on a closed or uninitialized socket');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let data = JSON.stringify(msg);
|
let data = JSON.stringify(msg);
|
||||||
this.socket!.send(data);
|
this.socket!.send(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
join(username: string, agent: string) {
|
join(username: string, agent: string) {
|
||||||
if (this.socket === null || this.socket.readyState !== this.socket.OPEN) {
|
if (this.socket === null || this.socket.readyState !== this.socket.OPEN) {
|
||||||
throw new Error("Tried to join() on a closed or uninitialized socket");
|
throw new Error('Tried to join() on a closed or uninitialized socket');
|
||||||
}
|
}
|
||||||
return new Promise<void>(res => {
|
return new Promise<void>((res) => {
|
||||||
let msg: MSAgentJoinMessage = {
|
let msg: MSAgentJoinMessage = {
|
||||||
op: MSAgentProtocolMessageType.Join,
|
op: MSAgentProtocolMessageType.Join,
|
||||||
data: {
|
data: {
|
||||||
username,
|
username,
|
||||||
agent
|
agent
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let u = this.on('join', () => {
|
let u = this.on('join', () => {
|
||||||
u();
|
u();
|
||||||
res();
|
res();
|
||||||
});
|
});
|
||||||
this.send(msg);
|
this.send(msg);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
talk(msg: string) {
|
talk(msg: string) {
|
||||||
let talkMsg: MSAgentTalkMessage = {
|
let talkMsg: MSAgentTalkMessage = {
|
||||||
op: MSAgentProtocolMessageType.Talk,
|
op: MSAgentProtocolMessageType.Talk,
|
||||||
data: {
|
data: {
|
||||||
msg
|
msg
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.send(talkMsg);
|
this.send(talkMsg);
|
||||||
}
|
}
|
||||||
|
|
||||||
getCharlimit() {
|
getCharlimit() {
|
||||||
return this.charlimit;
|
return this.charlimit;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async handleMessage(data: string) {
|
private async handleMessage(data: string) {
|
||||||
let msg: MSAgentProtocolMessage;
|
let msg: MSAgentProtocolMessage;
|
||||||
try {
|
try {
|
||||||
msg = JSON.parse(data);
|
msg = JSON.parse(data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(`Failed to parse message from server: ${(e as Error).message}`);
|
console.error(`Failed to parse message from server: ${(e as Error).message}`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
switch (msg.op) {
|
switch (msg.op) {
|
||||||
case MSAgentProtocolMessageType.Init: {
|
case MSAgentProtocolMessageType.Init: {
|
||||||
let initMsg = msg as MSAgentInitMessage;
|
let initMsg = msg as MSAgentInitMessage;
|
||||||
this.username = initMsg.data.username;
|
this.username = initMsg.data.username;
|
||||||
this.agent = initMsg.data.agent;
|
this.agent = initMsg.data.agent;
|
||||||
this.charlimit = initMsg.data.charlimit;
|
this.charlimit = initMsg.data.charlimit;
|
||||||
for (let _user of initMsg.data.users) {
|
for (let _user of initMsg.data.users) {
|
||||||
let agent = await agentCreateCharacterFromUrl(this.url + "/api/agents/" + _user.agent);
|
let agent = await agentCreateCharacterFromUrl(this.url + '/api/agents/' + _user.agent);
|
||||||
agent.addToDom(this.agentContainer);
|
agent.addToDom(this.agentContainer);
|
||||||
agent.show();
|
agent.show();
|
||||||
let user = new User(_user.username, agent);
|
let user = new User(_user.username, agent);
|
||||||
this.users.push(user);
|
this.users.push(user);
|
||||||
}
|
}
|
||||||
this.events.emit('join');
|
this.events.emit('join');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case MSAgentProtocolMessageType.AddUser: {
|
case MSAgentProtocolMessageType.AddUser: {
|
||||||
let addUserMsg = msg as MSAgentAddUserMessage;
|
let addUserMsg = msg as MSAgentAddUserMessage;
|
||||||
let agent = await agentCreateCharacterFromUrl(this.url + "/api/agents/" + addUserMsg.data.agent);
|
let agent = await agentCreateCharacterFromUrl(this.url + '/api/agents/' + addUserMsg.data.agent);
|
||||||
agent.addToDom(this.agentContainer);
|
agent.addToDom(this.agentContainer);
|
||||||
agent.show();
|
agent.show();
|
||||||
let user = new User(addUserMsg.data.username, agent);
|
let user = new User(addUserMsg.data.username, agent);
|
||||||
this.users.push(user);
|
this.users.push(user);
|
||||||
this.events.emit('adduser', user);
|
this.events.emit('adduser', user);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case MSAgentProtocolMessageType.RemoveUser: {
|
case MSAgentProtocolMessageType.RemoveUser: {
|
||||||
let remUserMsg = msg as MSAgentRemoveUserMessage;
|
let remUserMsg = msg as MSAgentRemoveUserMessage;
|
||||||
let user = this.users.find(u => u.username === remUserMsg.data.username);
|
let user = this.users.find((u) => u.username === remUserMsg.data.username);
|
||||||
if (!user) return;
|
if (!user) return;
|
||||||
user.agent.hide(true);
|
user.agent.hide(true);
|
||||||
if (this.playingAudio.has(user!.username)) {
|
if (this.playingAudio.has(user!.username)) {
|
||||||
this.playingAudio.delete(user!.username);
|
this.playingAudio.delete(user!.username);
|
||||||
}
|
}
|
||||||
this.users.splice(this.users.indexOf(user), 1);
|
this.users.splice(this.users.indexOf(user), 1);
|
||||||
this.events.emit('remuser', user);
|
this.events.emit('remuser', user);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case MSAgentProtocolMessageType.Chat: {
|
case MSAgentProtocolMessageType.Chat: {
|
||||||
let chatMsg = msg as MSAgentChatMessage;
|
let chatMsg = msg as MSAgentChatMessage;
|
||||||
let user = this.users.find(u => u.username === chatMsg.data.username);
|
let user = this.users.find((u) => u.username === chatMsg.data.username);
|
||||||
this.events.emit('chat', user, chatMsg.data.message);
|
this.events.emit('chat', user, chatMsg.data.message);
|
||||||
if (chatMsg.data.audio !== undefined) {
|
if (chatMsg.data.audio !== undefined) {
|
||||||
let audio = new Audio(this.url + chatMsg.data.audio);
|
let audio = new Audio(this.url + chatMsg.data.audio);
|
||||||
if (this.playingAudio.has(user!.username)) {
|
if (this.playingAudio.has(user!.username)) {
|
||||||
this.playingAudio.get(user!.username)?.pause();
|
this.playingAudio.get(user!.username)?.pause();
|
||||||
this.playingAudio.delete(user!.username);
|
this.playingAudio.delete(user!.username);
|
||||||
}
|
}
|
||||||
this.playingAudio.set(user!.username, audio);
|
|
||||||
audio.addEventListener('ended', () => {
|
this.playingAudio.set(user!.username, audio);
|
||||||
this.playingAudio.delete(user!.username);
|
|
||||||
});
|
audio.addEventListener('ended', () => {
|
||||||
audio.play();
|
this.playingAudio.delete(user!.username);
|
||||||
}
|
|
||||||
break;
|
// give a bit of time before the wordballoon disappears
|
||||||
}
|
setTimeout(() => {
|
||||||
}
|
user!.agent.stopSpeaking();
|
||||||
}
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
user?.agent.speak(chatMsg.data.message);
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue