npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wa-chat-server-facebook

v0.2.6

Published

wa-chat-server adapter for Facebook

Downloads

8

Readme

wa-chat-server-facebook

wa-chat-server-facebook is a wa-chat-server adapter for the Facebook messenger.

Create Facebook Messenger App

  1. Go to https://developers.facebook.com/ and log in using your credentials
  2. Create new Messenger app and open it
  3. From the left panel go to Messenger / Settings
  4. In Access Tokens section add your Facebook page and generate token (1)
  5. In Webhooks section add your callback URL <APP_URL>/adapters/facebook and add a Verify token (2) which can be random value (ideally UUID)
  6. Add your Facebook page to this Webhook and add select messages and messaging_postbacks in the Edit page subscriptions dialog

Adapter Usage

Register The Adapter

An initialization of the wa-chat-server (in a chat application using wa-chat-server to communicate with Watson Assistant) with a wa-chat-server-facebook adapter looks like this:

require('dotenv').config();
import { WAChatServer, Types } from 'wa-chat-server';
import { WAChatServerFacebookAdapter } from 'wa-chat-server-facebook';
const server: WAChatServer = new WAChatServer((process.env as any) as Types.IWAChatServerConfig);
server.addAdapter('facebook', WAChatServerFacebookAdapter);
server.serve();

Configure The Adapter

We must set the following environment variables (e. g. in .env):

| Variable | Obligatory | Meaning | | ------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | adapter__facebook__facebookApiUrl | Y | https://graph.facebook.com/v13.0/me/messages | | adapter__facebook__facebookToken | Y | Token (1) | | adapter__facebook__chatServerVerifyToken | Y | Verify token (2) | | adapter__facebook__integrationSource | N | Sets value of context variable integration-source. Default value is facebook | | adapter__facebook__replaceHtmlAnchor | N | If set to true the adapter will replace html tags to plain text value | | adapter__facebook__useSenderActions | N | If set to true the adapter will use mark_seen and typing_on sender actions when message is received (might generate additional API calls); If set to any other string (including false), it will be used as a context variable name and checked in incoming requests (refer to table below for examples); |

Use Sender Actions Example Table

| Configuration | Context | Will use sender actions? | | ---------------------- | -------------------------------------- | ------------------------ | | undefined \| null | any | N | | true | any | Y | | disableSenderActions | { } | Y | | disableSenderActions | { disableSenderActions: null } | Y | | disableSenderActions | { disableSenderActions: false } | Y | | disableSenderActions | { disableSenderActions: true } | N | | disableSenderActions | { disableSenderActions: 'disabled' } | N |

Watson Assistant Response Support

  1. text - Text reply (interpreted as Text message)
  2. suggestion - Disambiguation (interpreted as Postback buttons)
  3. option - Options (interpreted as Postback buttons)

Local Development

HTTP Tunnel Setup

For local development we need to set up a secure tunnel localhost and Facebook. We can use ngrok for this purpose:

ngrok http 3023

opens a tunel and gives us a public HTTPS URL to be used by Facebook (without an ngrok account the lifetime of the tunnel will be 2 hours). We must then use the Meta for Developers to set the Callback URL:

We may inspect the communication tunneled by ngrok to localhost on http://localhost:4040.

Transpilation

Run

npm run dev

Linking The Library to The Chat Project

Run

npm link

from the wa-chat-server-facebook root folder.

and then

npm link wa-chat-server-facebook

from the root of your chat application.