You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 13, 2024. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+4-115Lines changed: 4 additions & 115 deletions
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@
4
4
5
5
This repository contains the code for the Team Chat web reference application hosted on the [PubNub Chat Docs Page](https://www.pubnub.com/docs/chat/quickstart#quickstart). You can download the project to run on your local machine, and explore the code to see how we built it.
6
6
7
+
Check out the [documentation](http://pubnub.github.io/typescript-ref-app-team-chat) to learn about advanced features like profanity filtering, gifs, and link previews.
8
+
7
9

8
10
9
11
The application demonstrates how to build a chat application using:
@@ -34,7 +36,7 @@ To run this application you must obtain publish and subscribe keys from your Pub
34
36
35
37
1. Enable the **Objects** feature. **Presence** and **PubNub Functions** should have been enabled when the keyset was created.
36
38
37
-
1. Select a region to store your user data (e.g. *US East*).
39
+
1. Select a region to store your user data (e.g. *US East*).**DO NOT** enable user, channel, or membership events.
38
40
39
41
1. Locate the *Publish* and *Subscribe* keys. You'll need these keys to include in this project.
40
42
@@ -43,7 +45,7 @@ To run this application you must obtain publish and subscribe keys from your Pub
@@ -61,119 +63,6 @@ To run this application you must obtain publish and subscribe keys from your Pub
61
63
62
64
A web browser should automatically open [http://localhost:3000](http://localhost:3000), and you can explore your very own Team Chat app!
63
65
64
-
## Enable rich message features *(optional)*
65
-
66
-
### Gif Picker
67
-
68
-
To enable the gif picker, you need a GIPHY API key.
69
-
You can sign up for a (free) developer account and create a key from the [GIPHY developer dashboard](https://developers.giphy.com/dashboard/).
70
-
71
-
1. Create `.env` at the root of the project to hold your environment variables. This file will no be commited.
72
-
73
-
1. Copy the API key from the dashboard and add it to `.env`.
74
-
75
-
```dotenv
76
-
GIPHY_API_KEY=your-api-key
77
-
```
78
-
79
-
1. The variable needs to be exposed to the React app by adding another line.
80
-
81
-
```dotenv
82
-
REACT_APP_GIPHY_API_KEY=$GIPHY_API_KEY
83
-
```
84
-
85
-
86
-
1. Restart the dev server for the changes to take effect.
87
-
88
-
```bash
89
-
npm start
90
-
```
91
-
92
-
93
-
### Image Moderation
94
-
95
-
In addition to message moderation, AI powered moderation can be enabled to block innapropriate images.
96
-
97
-
You can sign up for a (free) account and API key from the [Sightengine dashboard](https://dashboard.sightengine.com/).
98
-
99
-
1. Add the **API User** and **API Secret** to your `.env` file.
100
-
101
-
```dotenv
102
-
FUNCTIONS_SIGHTENGINE_API_SECRET=your-api-secret
103
-
FUNCTIONS_SIGHTENGINE_API_USER=your-api-user
104
-
```
105
-
106
-
### /giphy command
107
-
108
-
The `/giphy ${message}`command shares a gif related to the message.
109
-
110
-
1. You should have created a GIPHY API key in the [Gif Picker](#gif-picker) section. Exposed it to the function by adding another variable that references it.
111
-
112
-
```dotenv
113
-
FUNCTIONS_GIPHY_API_KEY=$GIPHY_API_KEY
114
-
```
115
-
116
-
### Deploy Functions
117
-
118
-
Link previews, message moderation, and the `/giphy`command are powered by PubNub functions. To enable these features, you'll need to build and deploy the function code in `/server`.
119
-
120
-
#### Option 1: Automatic Upload
121
-
122
-
> Note: To manage functions from the CLI, you have to sign in to your PubNub account. This is currently not possible if you created your account with SSO.
123
-
124
-
1. Use the CLI to build and deploy the functions from source (in `server/src`).
125
-
126
-
```bash
127
-
npm run deploy:functions
128
-
```
129
-
130
-
1. Enter your PubNub account email and password (these will **not** be saved).
131
-
132
-
1. Select your app and keyset using the up/down arrows and return to submit.
133
-
134
-
#### Option 2: Manual Upload
135
-
136
-
1. From the PubNub dashboard, select the keyset your are using. Then, open the functions tab (on the left). Enter a module name and description, then click **Create New Module**.
137
-
138
-
1. Click **Create Function**, give it a name, set the event type to *Before Publish or Fire* and enter `*` for the channel pattern and click **Create**.
139
-
140
-
1. Use the CLI to build the functions from source (in `server/src`).
141
-
142
-
```bash
143
-
npm run build:functions
144
-
```
145
-
146
-
1. After running the build command, a minified and compiled version of the function is available is `server/build/transformPublishedMessages.js`. Copy the contents of the file into the functions editor and click **Save**.
147
-
148
-
1. Click **Start Module** from the top right to deploy your function.
149
-
150
-
## Documentation
151
-
152
-
We've included additional documentation and a detailed tutorial for building a chat app with React, Redux, and PubNub.
153
-
You can view it in the `/docs` directory or run the documentation site locally.
154
-
155
-
### Running the docs website
156
-
157
-
1. If you haven't already, clone the GitHub repository
If the chat app is already running, you may be asked to accept a different port. Your browser should open to [http//localhost:3000](http://localhost:3000) where you can find the tutorial and docs.
176
-
177
66
## Further Information
178
67
179
68
Checkout [PubNub Chat Docs](https://www.pubnub.com/docs/chat) page for more information about how to use the React and Redux SDKs to add in-app chat to your applications.
0 commit comments