Django / React JS 中的 Twilio TaskRouter
Twilio TaskRouter in Django / React JS
我正在使用 Twilio 构建一个简单的联络中心应用程序。
我在后端创建 TaskRouter Worker 功能令牌,如下所示:
序列化程序:
class TwilioTokenSerializer(serializers.BaseSerializer):
def to_representation(self, instance):
return {
'token': instance,
}
查看:
class TwilioWorkerView(generics.RetrieveAPIView):
serializer_class = TwilioTokenSerializer
def get_object(self):
current_user = self.request.user.worker
worker_sid = current_user.worker_sid
# Returns a Twilio Worker token for current agent
capability = WorkerCapabilityToken(
account_sid=TWILIO_ACCOUNT_SID,
auth_token=TWILIO_AUTH_TOKEN,
workspace_sid=TWILIO_WORKSPACE_SID,
worker_sid=worker_sid
)
capability.allow_fetch_subresources()
capability.allow_update_activities()
capability.allow_update_reservations()
token = capability.to_jwt()
token = capability.to_jwt(ttl=28800)
return token
反应中:
import { Worker } from 'twilio-taskrouter';
componentDidMount(){
axios.get('https://myURL.com/api/twilio-worker-token')
.then(res =>{
console.log(res.data.token)
const worker = new Worker(res.data.token)
}).catch(error =>{
console.log(error)
})
但我收到 403 网络套接字错误:
index.window.js:24 WebSocket connection to 'wss://event-bridge.twilio.com/v1/wschannels?token=(here the token)&closeExistingSessions=false&clientVersion=0.5.2' failed: Error during WebSocket handshake: Unexpected response code: 403
createWebSocket @ index.window.js:24
(anonymous) @ index.window.js:24
index.js:1 WebSocket error occurred: Event {isTrusted: true, type: "error", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
console.<computed> @ index.js:1
<computed> @ index.window.js:17
webSocket.onerror @ index.window.js:24
error (async)
createWebSocket @ index.window.js:24
(anonymous) @ index.window.js:24
setTimeout (async)
webSocket.onclose @ index.window.js:24
index.window.js:17 Uncaught n {_errorData: {…}, name: "GATEWAY_CONNECTION_FAILED", message: "Could not connect to Twilio's servers."}
r.emit @ index.window.js:17
(anonymous) @ index.window.js:17
r.emit @ index.window.js:17
webSocket.onerror @ index.window.js:24
error (async)
createWebSocket @ index.window.js:24
(anonymous) @ index.window.js:24
setTimeout (async)
webSocket.onclose @ index.window.js:24
index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
at S (index.js:1)
at V (index.js:1)
at index.js:1
at index.js:1
at u (index.js:1)
相同的设置在 html 和 taskrouter 的 cdn 上工作得很好
当我使用 cdn 和 react twilio-taskrouter 库时的区别是网络套接字 url,后者既不包括帐户 SID 也不包括工作人员 SID。
我错过了什么?
我明白了,我使用了错误的令牌,twilio-taskrouter库,我应该使用access token with TaskRouter Grant 而不是使用 TaskRouter Worker capability token.
class TwilioWorkerView(generics.RetrieveAPIView):
serializer_class = TwilioTokenSerializer
def get_object(self):
current_user = self.request.user
username = current_user.username
agent_sid = current_user.agent.agent_sid
access = AccessToken(TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET)
taskrouter_grant = TaskRouterGrant(workspace_sid=TWILIO_WORKSPACE_SID, worker_sid=agent_sid, role='worker')
access.add_grant(taskrouter_grant)
access.identity = username
token = access.to_jwt()
return token
我正在使用 Twilio 构建一个简单的联络中心应用程序。 我在后端创建 TaskRouter Worker 功能令牌,如下所示: 序列化程序:
class TwilioTokenSerializer(serializers.BaseSerializer):
def to_representation(self, instance):
return {
'token': instance,
}
查看:
class TwilioWorkerView(generics.RetrieveAPIView):
serializer_class = TwilioTokenSerializer
def get_object(self):
current_user = self.request.user.worker
worker_sid = current_user.worker_sid
# Returns a Twilio Worker token for current agent
capability = WorkerCapabilityToken(
account_sid=TWILIO_ACCOUNT_SID,
auth_token=TWILIO_AUTH_TOKEN,
workspace_sid=TWILIO_WORKSPACE_SID,
worker_sid=worker_sid
)
capability.allow_fetch_subresources()
capability.allow_update_activities()
capability.allow_update_reservations()
token = capability.to_jwt()
token = capability.to_jwt(ttl=28800)
return token
反应中:
import { Worker } from 'twilio-taskrouter';
componentDidMount(){
axios.get('https://myURL.com/api/twilio-worker-token')
.then(res =>{
console.log(res.data.token)
const worker = new Worker(res.data.token)
}).catch(error =>{
console.log(error)
})
但我收到 403 网络套接字错误:
index.window.js:24 WebSocket connection to 'wss://event-bridge.twilio.com/v1/wschannels?token=(here the token)&closeExistingSessions=false&clientVersion=0.5.2' failed: Error during WebSocket handshake: Unexpected response code: 403
createWebSocket @ index.window.js:24
(anonymous) @ index.window.js:24
index.js:1 WebSocket error occurred: Event {isTrusted: true, type: "error", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
console.<computed> @ index.js:1
<computed> @ index.window.js:17
webSocket.onerror @ index.window.js:24
error (async)
createWebSocket @ index.window.js:24
(anonymous) @ index.window.js:24
setTimeout (async)
webSocket.onclose @ index.window.js:24
index.window.js:17 Uncaught n {_errorData: {…}, name: "GATEWAY_CONNECTION_FAILED", message: "Could not connect to Twilio's servers."}
r.emit @ index.window.js:17
(anonymous) @ index.window.js:17
r.emit @ index.window.js:17
webSocket.onerror @ index.window.js:24
error (async)
createWebSocket @ index.window.js:24
(anonymous) @ index.window.js:24
setTimeout (async)
webSocket.onclose @ index.window.js:24
index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
at S (index.js:1)
at V (index.js:1)
at index.js:1
at index.js:1
at u (index.js:1)
相同的设置在 html 和 taskrouter 的 cdn 上工作得很好 当我使用 cdn 和 react twilio-taskrouter 库时的区别是网络套接字 url,后者既不包括帐户 SID 也不包括工作人员 SID。
我错过了什么?
我明白了,我使用了错误的令牌,twilio-taskrouter库,我应该使用access token with TaskRouter Grant 而不是使用 TaskRouter Worker capability token.
class TwilioWorkerView(generics.RetrieveAPIView):
serializer_class = TwilioTokenSerializer
def get_object(self):
current_user = self.request.user
username = current_user.username
agent_sid = current_user.agent.agent_sid
access = AccessToken(TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET)
taskrouter_grant = TaskRouterGrant(workspace_sid=TWILIO_WORKSPACE_SID, worker_sid=agent_sid, role='worker')
access.add_grant(taskrouter_grant)
access.identity = username
token = access.to_jwt()
return token