Could someone explain why my custom vue 3 chat implementation keeps getting dropped during the initial handshake? i’m trying to ditch the heavy default widget and build a lightweight ui using the raw web socket guest api endpoints.
i’ve got the oauth token flow working fine for the admin side but the guest authentication is throwing a fit. here is my setup:
- i call
/api/v2/conversations/messaging/gueststo create a guest profile. - i grab the
guestIdandmessagingChannelIdfrom the response. - i construct the web socket url using the pattern
wss://{orgId}.mypurecloud.com/api/v2/conversations/messaging/websockets/guests/{guestId}.
the connection opens briefly then immediately closes with a 401 unauthorized. i’ve verified the token is valid by calling /api/v2/oauth/token right before and it returns a 200 with a fresh access token.
here is the relevant code snippet:
const connectSocket = async () => {
const token = getAccessToken(); // returns valid bearer token
const url = `${WS_URL}/guests/${guestId}`;
const ws = new WebSocket(url);
ws.onopen = () => {
// send auth message
ws.send(JSON.stringify({
type: 'auth',
token: token
}));
};
ws.onclose = (event) => {
console.log('closed', event.code, event.reason);
// logs: closed 1008 policy violation
};
};
i’m sending the auth payload as json immediately after the socket opens. the docs say the token should be passed in the query string or the auth message. i’ve tried both. query string gives me a 400 bad request saying invalid params. auth message gives me the 1008 close code which maps to a 401 on the server side if i check the error logs in the admin portal.
is there a specific header i need to set on the web socket connection? or am i missing a step in the guest creation flow? i’m running this from a vue 3 composition api component and the cors preflight passes fine for the http calls but the web socket handshake is failing.
any ideas? i’ve been stuck on this for two days. the default widget works fine but it’s too bloated for our current ui requirements.