Same Page (previously called Chat Anywhere) is a Chrome extension that adds a chat box to any website. You can also customize the source code and use it on your own website.
This repository contains frontend code only.
The client folder includes the chat box and an injection script, both of them are built with create-react-app. The way it works is that once you include the injection script to your website, the script can create an iframe with chat box. This design has two major benefits:
- The chat box's file size is quite big because it includes so many features, therefore you probably don't want to load it on every page load. It makes a lot more sense to load the chat box iframe only when user wants to use it.
- Iframe provides great isolation of the chat box and your website, no need to worry about CSS or Javascript pollution.
The injection script itself is rather small, it's able to
- Add a button that creates the iframe with chat box.
- Connect to chat socket server and show how many users are on the same page or site.
- Show Danmu (scrolling text) for live messages.
We include the 2nd and the 3rd functionality to the injection script rather than the chat box because they are very useful for the Chrome extension.
Remeber that the client contains two pieces, so there are two steps to run client locally. First, run the chat box app
cd client/chatbox
npm install .
npm start
The first time you run this will be slower, because it needs to install all the packages needed. The chat box will be running on localhost:3000, but the chat box is not designed to be used by itself, instead, it must be used in an iframe. So the next thing you need to do is to run the injection script app.
cd client/injection-script
npm install .
npm start
Now you should see the client running on localhost:3210, the chatbox should also show up there.
The client is talking to the official backend by default. If you want the client to talk to your local backend, it's very easy. Instead of npm start, type npm start:dev. Then it will be talking to your localhost:8080 for websocket connections for live chat feature and localhost:8081 for ajax calls for all other purposes. So you need to have those running. Please read the next section to learn how to run backend locally.
cd server/chat-socket
npm install .
node index.js
cd server/api
(Highly recommend that you create a Python virtual env first)
pip install -r requirements.txt
python run.py
Like mentioned before, the client has two parts - chat box and injection script. They need to be built separately. To build the chat box.
cd client/chatbox
npm run build
To build the injection script.
cd client/injection-scirpt
npm run build
The final build is placed in the /build folder.
To use your own version of injection script, upload your client/injection-scirpt/build/content-static folder to your server so it's reachable as your-website.com/build/content-static. Then include the scripts by adding following lines to your website.
<link href="https://your-website.com/build/content-static/css/main.css" rel="stylesheet">
<script src="https://your-website.com/build/content-static/js/main.js" ></script>
To use your own version of chat box, upload your client/chatbox/build/content-static folder to your server so it's reachable as your-website.com/build/static. You'll need to modify the injection script, specifically the iframe src to point to your own chat box, otherwise it will use the offical build of the chat box.
This doc needs update...