Skip to content

Instantly share code, notes, and snippets.

@seanmtracey

seanmtracey/Node-RED + Watson Assistant Details.md

Last active July 24, 2019 10:26
Show Gist options
  • Save seanmtracey/ba2d818f0a2087813e8da49ca9d4bf4f to your computer and use it in GitHub Desktop.
Save seanmtracey/ba2d818f0a2087813e8da49ca9d4bf4f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo-flow.json
[{"id":"6ef14b61.701034","type":"watson-conversation-v1","z":"6f2ce8db.0463d8","name":"","workspaceid":"","multiuser":false,"context":true,"empty-payload":false,"default-endpoint":true,"service-endpoint":"https://gateway.watsonplatform.net/assistant/api","timeout":"","optout-learning":false,"x":540,"y":300,"wires":[["8a58287e.2fcd78","b7167dd3.ec22a"]]},{"id":"b7e19da6.a90b8","type":"websocket in","z":"6f2ce8db.0463d8","name":"","server":"7b3c79d.bb90188","client":"","x":130,"y":240,"wires":[["7136b412.2be1dc","b7167dd3.ec22a"]]},{"id":"8a58287e.2fcd78","type":"websocket out","z":"6f2ce8db.0463d8","name":"","server":"7b3c79d.bb90188","client":"","x":730,"y":300,"wires":[]},{"id":"b7167dd3.ec22a","type":"debug","z":"6f2ce8db.0463d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":710,"y":240,"wires":[]},{"id":"7136b412.2be1dc","type":"function","z":"6f2ce8db.0463d8","name":"Restructure data","func":"const PAYLOAD = JSON.parse(msg.payload);\n\nmsg.payload = PAYLOAD.message;\nmsg.params = {\n context : PAYLOAD.context\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":300,"wires":[["6ef14b61.701034","b7167dd3.ec22a"]]},{"id":"7b3c79d.bb90188","type":"websocket-listener","z":"","path":"/ws/chat","wholemsg":"false"}]
Raw
mvp.html
<!DOCTYPE html>
<html>
<head>
<title>Demo WebSockets + Assistant Page</title>
<link rel='stylesheet' href='style.css' />
</head>
<body>
<div id="transcript">
<!--<div class="to message">Hello, my name is Keith. My parents abandoned me at a young age, and now I test chatbots</div>
<div class="from message">Hey Keith, sucks to be you.</div>-->
</div>
<form>
<input type="text" id="text"/>
<input type="submit" value="Send" />
</form>
<script>
const transcriptElement = document.querySelector('#transcript');
let MESSENGER_CONTEXT;
const NODE_RED_SERVER_HOSTNAME = "localhost:1880";
const ws = new WebSocket(`wss://${NODE_RED_SERVER_HOSTNAME}/ws/chat`);
ws.addEventListener('open', function(e){
console.log(`Websocket connection opened`, e);
});
ws.addEventListener('message', function(e){
console.log(e);
const data = JSON.parse(e.data);
MESSENGER_CONTEXT = data.context;
data.output.text.forEach(response => {
const fromMessage = document.createElement('div');
fromMessage.textContent = response;
fromMessage.classList.add('from');
fromMessage.classList.add('message');
transcriptElement.appendChild(fromMessage);
});
});
ws.addEventListener('error', function(err){
console.log('Websocket connection error:', err);
});
const form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
e.stopImmediatePropagation();
if(ws.readyState === 1){
const toMessage = document.createElement('div');
toMessage.textContent = form.querySelector('#text').value;
toMessage.classList.add('to');
toMessage.classList.add('message');
transcriptElement.appendChild(toMessage);
ws.send(JSON.stringify({
message : form.querySelector('#text').value,
context : MESSENGER_CONTEXT
}));
form.reset()
}
});
</script>
</body>
</html>
Raw
Node-RED + Watson Assistant Details.md

Instructions for plugging a website into Watson Assisstant with Node-RED + WebSockets

Okie dokie, so you want to plug your website into Watson Assistant, well, here's how you can do that.

First, you'll need to set up a Node-RED server which can talk to Watson Assistant. The demo-flow.json contains a demo flow that will hook up a websockets endpoint to a Watson Assistant instance enabling you to talk to the Assistant instance with a web page.

  1. Copy the contents of demo-flow.json into your clipboard and then head to any Node-RED flow.
  2. Top right of the Node-RED UI, hit the hamburger menu and then hover over "import" and then select "clipboard" from the context menu that appears.
  3. In the dialog box that appears, paste the content of your clipboard and then click "import"
  4. A flow will appear in your workflow, click to place it, you now have a websocket connection configured to talk to Watson Assistant
  5. Head to your assistant workspace and find the credentials for you flow. Copy and paste them into the configuration panel for your assistant node where applicable.

Secondly, you'll need to add some code to your web page to pass messages to the websocket connection we just created. The mvp.html file contains a working demo that will plug straight into your demo. You don't need to copy the whole thing just copy the <form> and <script> tags and their contents into your own HTML page.

  1. Copy the <form> and <script> tags and their contents into your own HTML page.
  2. Replace the NODE_RED_SERVER_HOSTNAME value with the hostname of your own Node-RED server.

Now, whenever you submit some text in the forms <input> field, it will be passed to Watson Conversation.

Raw
Styles.css
/* CSS files add styling rules to your content */
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
}
h1 {
font-style: italic;
color: #373fff;
}
form{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#transcript{
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 2em;
}
.message{
max-width: 75%;
font-size: 0.5em;
float: right;
display: inline-block;
clear: both;
background: blanchedalmond;
padding: 5px;
box-sizing: border-box;
margin-bottom: 1em;
border-radius: 3px;
}
.message.from{
float: left;
background: darkseagreen;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment