リアルタイムのチャットアプリケーション+タイプスクリプト

私はデノを学んだときに興味のあるものの一つは、リアルタイムのチャットアプリケーションを作成しています.しかし、私はWebSocketでnodejsを学んでいたとき、私は作成し、fostletと呼ばれるチャットアプリケーションを展開しました.あなたが行くことができると別のチャットルームでそれを試してください.
このポストでは、私はあなたがどのようにDenoを使用して簡単なチャットアプリケーションを構築する方法を説明します.デコは、実行時に最初のクラスの言語としてJavaScriptとTypesScriptの両方をサポートしています.これは拡張子(または正しいメディアタイプを提供するサーバ)を含む完全修飾モジュール名を必要とすることを意味します.TypesScriptモジュールを直接インポートすることができます.それで、私は、タイプスクリプトがdenoによりよいと思います.

インストール

基本的には、簡単なコマンドを実行してセットアップをインストールすることができます.

電通 用途

我々はWebSocketでこのチャットアプリを開発します.WebSocketは、ブラウザとサーバーの間のリアルタイム、双方向、およびイベントベースの通信を行うことができるライブラリです.

ステップ1

新しいフォルダにindex.htmlという新しいファイルを作成し、以下のコードを書いて簡単なユーザインタフェースを作成します.

<div class="container">
  <form class="init_form">
    <input type="text" name="name" placeholder="Enter your name" required />
    <button>Start Chat</button>
  </form>

  <div class="msg_room">
    <ul class="msg_list"></ul>
    <form class="msg_form">
      <input type="text" name="msg" placeholder="Type a message" required />
      <button>Send</button>
    </form>
  </div>
</div>

また、スタイルファイルを使用してスタイルを追加します.より多くのカスタマイズはあなた次第です.

<style>

    body{
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    .container{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    input[type=text]{
        padding: 5px;
        border-radius: 5px;
        border: #888 2px solid;
        width: 250px;
    }
    button{
        padding: 5px;
        background-color: #eee;
        border-radius: 5px;
        outline: none;
    }
    .msg_room{
        display: none;
    }
    .pname{
        font-weight: bold;
        margin-left: 5px;
    }
    .pmsg{
        background-color: #eee;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
    }
    ul{
        list-style: none;
    }

</style>

さて、JavaScriptをしましょう、index.htmlの内部で、ハンドルメッセージ送信、ユーザ名送信、およびクライアント側でのWebSocket実現のためにJSを書く新しいindex.htmlタグを作成してください.
DOM要素とWebSocketを選択する

const initForm = document.querySelector('.init_form');
const msgRoom = document.querySelector('.msg_room');
const msgList = document.querySelector('.msg_list');
const msgForm = document.querySelector('.msg_form');
const ws = new WebSocket('ws://localhost:3000/ws');

ハンドルネームフォーム

initForm.addEventListener('submit', (e) => {
    e.preventDefault();
    name = initForm.name.value;
    msgRoom.style.display = "block"
    initForm.style.display = "none"
});

メッセージフォームの送信要求を処理し、JSON形式のサーバー側に送信します.

msgForm.addEventListener('submit', e => {
    e.preventDefault();
    const msg = msgForm.msg.value;
    ws.send(JSON.stringify({
        name,
        msg
    }));
    msgForm.msg.value = '';
});

HTMLの要素を持つクライアント側の着信メッセージを出力します.

const msgOutput = ({ data }) => {
    const { name, msg } = JSON.parse(data);
    const li = `
        <li>
            <div class="pname">${name}</div>
            <div class="pmsg">${msg}</div>
        </li>
    `;
    msgList.innerHTML += li;
}

最後に、WebSocket用のイベントリスナーを追加します.

ws.addEventListener('message', msgOutput);

ステップ2

ああ!クライアント側が完了しました.次の動きは、サーバー側の接続を作成することです.インデックスと同じように新しいファイル<script>を作成します.HTMLディレクトリ.
インポートWebSocketとランダムユーザーIDライブラリを生成する

import { WebSocket, isWebSocketCloseEvent } from "https://deno.land/std/ws/mod.ts";
import { v4 } from "https://deno.land/std/uuid/mod.ts";

実装する

let sockets = new Map<string, WebSocket>();

イベントブロードキャスター機能のためにTypeScriptインターフェースを作成して、connection.tsとして機能を定義してください.

interface BrodcastInterface {
    name: string,
    msg: string
};

const eventBrodcaster = (obj: BrodcastInterface) => {
    sockets.forEach((ws: WebSocket) => {
        ws.send(JSON.stringify(obj));
    });
}

リクエストを処理するための接続を作成します.

const connection = async (ws: WebSocket) => {

    // New websocket and generate new user id
    const uid = v4.generate();
    sockets.set(uid, ws);

    for await (const ev of ws){

        // remove socket if user close the tab or browser
        if(isWebSocketCloseEvent(ev)){
            sockets.delete(uid);
        }

        // broadcast the message that user sent
        if(typeof ev === 'string'){
            let evObj = JSON.parse(ev);
            eventBrodcaster(evObj);
        }
    }
}

ファイルの一番下に接続をエクスポートします.

export { connection };

ステップ3

さて、これは最終的なステップです、インデックスと同じように新しいファイルeventBrodcasterを作成します.HTMLと接続.tsディレクトリ.
インポートサーブ、WebSocketライブラリとserver.tsファイルです.

import { serve } from "https://deno.land/std/http/server.ts";
import { acceptWebSocket, acceptable } from "https://deno.land/std/ws/mod.ts";
import { connection } from './connection.ts';

ポートconnection.tsを聞き、必要に応じて3000を追加します.

const server = serve({ port: 3000 });
console.log("Chat app listening on port 3000");

ルートディレクトリとWebSocketディレクトリのブラウザルートを聞きます.

for await (const req of server){
    // serve index.html file - route /
    if(req.url === '/'){
        req.respond({
            status: 200,
            body: await Deno.open('./index.html')
        });
    }

    // serve websocket route and accept socket - route /ws
    if(req.url === '/ws'){
        if(acceptable(req)){
            acceptWebSocket({
                conn: req.conn,
                bufReader: req.r,
                bufWriter: req.w,
                headers:req.headers
            })
            .then(connection)
        }
    }
}

今すぐすべて完了!既にdenoをインストールしている場合は、このコマンドをプロジェクトディレクトリのターミナルに実行します.
--ネットワークアクセスを許可するためにNETを許可する読み込みファイルの読み込みを許可します.

deno run --allow-net --allow-read server.ts

今すぐあなたのシンプルなチャットアプリケーションのポート番号console.logに住んで見ることができます.
フォローミーオン
ハッピーコーディング!🎉