@sociably/webview v0.8.0
Webview Platform
Serve webviews that integrated with the chat platforms.
- Host a front-end app powered by Next.js.
- Automatically log in users with the chat platform account.
- Mutually communicate to the server with WebSocket.
This package combines three modules: @sociably/auth
,
@sociably/next
and @sociably/websocket
.
You can use them separatedly if you don't need them all.
Install
npm install react react-dom next @sociably/core @sociably/http @sociably/webview
# or with yarn
yarn add react react-dom next @sociably/core @sociably/http @sociably/webview
Docs
Check the Embedded Webview document and the API references.
Setup
Back-End
Assume you have the Next.js app directory at ./webview
, set up webview platform like this:
// src/app.js
import Sociably from '@sociably/core';
import Http from '@sociably/http';
import Webview from '@sociably/webview';
import Facebook from '@sociably/facebook';
import FacebookWebviewAuth from '@sociably/facebook/webview';
import nextConfigs from '../webview/next.config.js';
const { DOMAIN, WEBVIEW_AUTH_SECRET, NODE_ENV, FACEBOOK_APP_ID } = process.env;
const DEV = NODE_ENV !== 'production';
const app = Sociably.createApp({
modules: [
Http.initModule({/* ... */}),
],
platforms: [
Facebook.initModule({/* ... */}),
Webview.intiModule({
webviewHost: DOMAIN,
webviewPath: '/webview', // have to match `basePath` in next.config.js
authSecret: WEBVIEW_AUTH_SECRET,
authPlatforms: [
// auth providers from platforms
FacebookWebviewAuth,
],
nextServerOptions: {
dev: DEV, // use dev mode or not
dir: './webview', // the front-end app dir
conf: nextConfigs, // import configs from next.config.js
},
}),
],
});
app.onEvent(async ({ event, bot }) => {
if (event.platform === 'webview' && event.type === 'connect') {
await bot.send(event.channel, {
type: 'hello',
payload: 'hello from server',
});
}
});
app.start();
You can create the front-end app with npx create-next-app
if you don't have one.
Front-End
Set up the Next.js app like this:
// webview/next.config.js
module.exports = {
distDir: '../dist', // the path of built front-end codes
basePath: '/webview', // have to match `webviewPath` on back-end
publicRuntimeConfig: {
// export settings to front-end if needed
facebookAppId: process.env.FACEBOOK_APP_ID,
},
};
Then you can use WebviewClient
in the front-end pages like this:
// webview/pages/index.js
import { useEffect } from 'react';
import getConfig from 'next/config';
import WebviewClient from '@sociably/webview/client';
import FacebookWebviewAuth from '@sociably/facebook/webview/client';
// get settings if needed
const { publicRuntimeConfig } = getConfig();
// to activate publicRuntimeConfig
export const getServerSideProps = () => ({ props: {} });
const client = new WebviewClient({
// prevent connecting in the back-end while server rendering
mockupMode: typeof window === 'undefined',
// auth providers from platforms
authPlatforms: [
new FacebookWebviewAuth({
appId: publicRuntimeConfig.facebookAppId,
}),
],
});
export default function Home() {
const greetingMsg = useEventReducer(
client,
(msg, event) => event.type === 'hello' ? event.payload : msg,
null
);
useEffect(
() => {
client.send({ type: 'hello', payload: 'hello from webview' });
},
[greetingMsg]
)
return <h1>{greetingMsg} || 'connecting...'</h1>
}
25 days ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
7 months ago
9 months ago
9 months ago
11 months ago
1 year ago
12 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago