Switch branches/tags
Nothing to show
Find file History
Alchemist85K bugfix - date display
bugfix - get message list
Latest commit 561aeb8 Sep 13, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
build bugfix - date display Sep 13, 2018
src bugfix - date display Sep 13, 2018
.babelrc bugfix - date display Sep 13, 2018
.eslintrc.js bugfix - date display Sep 13, 2018
.prettierignore bugfix - date display Sep 13, 2018
.prettierrc bugfix - date display Sep 13, 2018
README.md code refactoring Feb 23, 2018
SendBird.min.js sample update Nov 15, 2017
index.html sample design update Aug 14, 2017
package.json bugfix - date display Sep 13, 2018
server.js sample update Nov 15, 2017
webpack.config.js bugfix - date display Sep 13, 2018

README.md

SendBird JavaScript Chat Sample

This is a sample chat built using using the SendBird SDK. It can be used to add a functional chat to any website.

Demo

You can try out a live demo from the link here. Choose any 'User ID' and 'Nickname' to log in and participate in chats.

Setup

  1. The body must have a div element whose id is sb_chat. we recommend width and height to 400px or over both.
<body>
  <div id="sb_chat"></div>
</body>
  1. Import the SendBird SDK.
  2. Import the liveChat.SendBird.js file.
<script src="SendBird.min.js"></script>
<script src="build/liveChat.SendBird.js"></script>

Customizing the sample

If you refresh your browser window, you need to reconnect to SendBird. To retain connection on browser refresh, you must implement an appropriate event handler.

If you wish to issue an access_token for your user, modify the connect function in src/sendbird.js.

Require that you have Node installed.

  1. Install npm

     npm install
    
  2. Modify files.

     npm run start-dev
    
  3. Start sample.

     npm start
    

Advanced

Connect other APP or Channel

If you want to connect other application or channel, you need to change variable appId or channelUrl in index.html.

...

  <script src="SendBird.min.js"></script>
  <script src="build/liveChat.SendBird.js"></script>
  <script>
    var appId = '<APP_ID>';
    var channelUrl = '<CHANNEL_URL>';
    liveChat.start(appId, channelUrl);
  </script>

</html>

Start with User connect

If you want to start this sample with user connect, you can using startWithConnect().

...
  <script src="SendBird.min.js"></script>
  <script src="build/liveChat.SendBird.js"></script>
  <script>
    var appId = '<APP_ID>';
    var userId = '<USER_ID>';
    var nickname = '<NICKNAME>';
    var channelUrl = '<CHANNEL_URL>';
    liveChat.startWithConnect(appId, userId, nickname, function() {
      // do something...
    });
  </script>

</html>

Enter Channel

If you want to enter channel, you can using enterChannel().

...
var channelUrl = '<CHANNEL_URL>';
liveChat.enterChannel(channelUrl, function() {
  // do something...
});
...

Exit Channel

If you want to exit current channel, you can using exitChannel().

...
liveChat.exitChannel(function() {
  // do something...
});
...

File Structure

    |-- build
        |-- liveChat.SendBird.js            - SendBird Chat Bundle file
    |-- node_modules
        |-- ...                             - (node packages)
    |-- src
        |-- js
            |-- elements  
                |-- elements.js             - elements root class
                |-- spinner.js              - spinner element
                |-- chat-board.js           - board element
                |-- login-board.js          - login element
                |-- message-board.js        - message element
            |-- sendbird.js                 - sendbird functions
            |-- chat.js                     - chat functions
        |-- scss
            |-- mixins 
                |-- _border-radius.scss     - border radius mixin  
                |-- _box-shadow.scss        - box shadow mixin
                |-- _state.scss             - element state mixin
                |-- _transform.scss         - transform mixin
                |-- _reset.scss             - clean css mixin
            |-- _mixins.scss                - import mixin
            |-- _variables.scss             - css variables
            |-- _animation.scss             - animation
            |-- _icons.scss                 - icon 
            |-- chat.scss                   - main css  
|-- .eslintrc.js                            - lint setting 
|-- webpack.config.js                       - webpack setting 
|-- package.json                            - npm package 
|-- SendBird.min.js                         - SendBird SDK 
|-- index.html                              - sample file
|-- README.md