Creating a text chat app

JavaScript

Creating the Project Folders and HTML Template

You will start by creating an HTML file, a JavaScript file, and a CSS file. These three files will contain our layout, application logic, and some visual elements, respectively.

Before you get started with code, go ahead and create a new project folder on your computer to house these files (the example below is called myproject but you can name it whatever you like). Then add a /js and /css folder along with blank files for index.html, app.js, and app.css in the following structure:

/myproject /js app.js /css app.css index.html

Once you have your project set up, open the main project folder in your code editor and go to the index.html file.

Copy the following code (using the copy button) and add it to your index.html file in the code editor:

<!DOCTYPE html>
<html>

<head>
    <title> OpenTok Signaling Sample </title>

    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <link href="css/app.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="textchat">
         <p id="history"></p>
         <form>
              <input type="text" placeholder="Input your text here" id="msgTxt"></input>
         </form>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
</body>

</html>

The above code includes references to the opentok.js library as well as the JS and CSS files you created. The code also includes a div for the text chat and a form for you to send messages.

Basic text chat

Follow this tutorial to build basic text chat from scratch using the Vonage Video API. It is the quickest way to build a proof of concept for this functionality on the video platform.

以下の言語で利用可能:

JavaScript Java Swift

手順

Overview

Before You Begin

Configure a Vonage Video Application

Creating the Project Folders and HTML Template

Setting Up Authentication

Connecting to the Session

Sending a Signal

Receiving a Signal

Testing your Code in a Browser