私は WebRtc を介して自分の Web サイトを構築し、次の機能を実現しました。
1. ログイン・登録機能
2. チャットホールデザイン
3. ポイントツーポイントビデオチャット
4. インターフェイス美化
ウェブサイトのダウンロード
webstorm によって作成されたファイルにはサフィックスがなく、Web サイトに入ってファイルをクリックすると、自動的にダウンロードされます。
txt ファイルを作成し、新しいファイルに名前を付けるときにサフィックス .txt を追加します。
コードが変更された後、ブラウザーが応答しないか、更新されないか、キャッシュがクリアされません。(ブラウザは怠惰で、キャッシュされたコンテンツを表示します)。
ハイパーリンク
window.location.href = "chat.html?uname="+encodeURI(uname);
//window.location.href = "https://101.200.147.94/zhuaizhuai.jpg";
コードノート
.listen(0.0.0.0)表示监听所有端口；
<h1>xxx </h1> //一行字
第1章 ログインと登録機能
index.html で、メイン フレーム (インターフェイスに表示されるコンテンツ) をビルドします。
ログインと登録のインターフェイスはボックスに配置する必要があります。最初にdivが来ます
<div align = "center"> //居中对齐，但align已经没在用，但也能起作用
別のテーブル
<table><table>
次に来るランクtr、td
<tr> //行
<td> //列
レーベルレーベルに来て
<lable>xxx<lable> //标签
入力ボックス入力に来ます
<input id = "xxx">
<input id = "pwd" type="password"> //密码输入时隐藏显示黑点点
さあボタンボタン
<button id = "regist">注册</button>
//加点花样
<button id = "regist" style="font-size: 20px">注册</button> //20像素
ウェブストーム+データベース
データベースを server.js に追加する
1. sqlite3 をインストールするには、Webstorm とクラウド サーバーの両方にソフトウェアをインストールする必要があります。
2. クラウド サーバーが sqlite3 をインストールし、エラー module_not_found を報告する場合 (次のように)、バージョンの問題である可能性があります. [email protected] の以前のバージョンをインストールしてみてください. ノードの一部の新しいバージョンは、古いバージョンと互換性がありません (不正行為)。
npm 削除ソフトウェア
npm remove xxx
バージョン番号を表示
npm list
新しいデータベース
var db = null;
db = new sqlite3.Database("app.db",(e)=>{
if(e)
logger.info(e);
else
logger.info("SUC");
});
//因为sql之类的经常容易出问题，需要logger打印一下成功与否
新しいテーブル
db.run("create table if not exists users(id integer primary key autoincrement, "
+"name char(50) unique, pwd char(200))",(e)=>{
if(e)
logger.info(e);
else
logger.info("create table successfully");
});
执行建表语句：db.run()
テーブルにデータを挿入する
sql = "insert into users(name, pwd) values('kkb','123')";//插入用户名kkb和密码123
db.exec(sql,(e)=>{
//执行sql语句，只需要对sql进行调整就行
//随时打印日志
})
执行插入语句：db.exec()
クエリ選択
sql = "select * from users";
//写*要被打死，因为经常有在表中插入删改（表头，表中，表尾都有可能），原本指定的第n行数据可能就不是原来那个数据了，所以开发的时候一定要写清楚是查哪一个数据。
sql = "select id, name, pwd from users";
执行查询语句：db.all()
db.all(sql, (e, rows)=>{
if(e)
logger.info(e);
else
logger.info("rows");
logger.info(rows[1]);//打印第二行
logger.info(rows[1]["id"]);打印第二行的id列
logger.info(rows[1]["name"]);打印第二行的name列
logger.info(rows[1]["pwd"]);打印第二行的pwd列
})
失败打印e，成功打印rows；
socket.io および js ファイルのインポート
<script src = "./js/socket.io.js"></script> //网上下载再copy到工程目录下
<script src = "./js/index.js"></script> //自己新建的控制脚本
ジャンプ インターフェイス
window.location.href = "https://101.200.147.94/zhuaizhuai.jpg";//直接给网址
window.location.href = "regist.html";//同(不是同级目录好像也可以)目录下的文件
平文パスワード
socket.emit("regist", uname, pwd);
//都是明文密码，不安全，需要加密，数据库中也是加密后的密码，比如说银行就是这样
window.location.href = "chat.html?uname="+uname;
//网页后面就会拼上一个uname
ファイル/コードの名前変更
shift + f6
//可以改文件名，还可以批量改代码名称
//js全家桶都很好用
コードを展開して折りたたむ- +
インターフェイスは自由に変更できます。右クリック -> 変更したいものを確認しますが、変更するのは自分のブラウザーのインターフェイスのみであり、他のユーザーには影響しません。
td colspan="2"
一列占两列空间
オーディオ デバイスを取得する
var constraints = {
video:true,
audio:false
};
navigator.mediaDevices.getUserMedia(constraints)
.then(getStream)
.catch(handleErr)
//成功了.then
//失败了.catch
エラーを報告する
TypeError: Cannot read properties of undefined (reading 'sockets')
//这个异常一出来就直接崩了，是因为你没有处理这个异常；
//有时候就是会莫名其妙出现各种异常，也找不到原因在哪，那就处理一下异常，防止程序崩溃
例外処理
try{
var myRoom = io.sockets.adapter.rooms[room];
var users = Object.keys(myRoom.sockets).length - 1;
} catch (e) {
logger.info(e);
return;
}
//try一下，然后打印异常
MD5 暗号化
为了安全，密码绝对不能直接通过网络。必须加密传输。由前端进行加密。
需要引用md5.js文件，网络上别人已经写好了，直接下载拿来用。
hex_md5(pwd);
中国語の質問
为了解决中文问题，安利一个好东东notepad++，超级记事本。
中国語を入力すると、右下隅に次のように表示され、現在のスタイルがウィンドウであることを示します。
Windows スタイルには、目に見えないものがたくさんあります。
クリックしてすべての文字を表示すると、中国語以外のものがたくさんあることがわかります。
検索と置換、検索モードの拡張子の選択 (プログラマーであることを認識させるため)、すべての **\r\n を\n**に置き換え、ファイルを保存して閉じ、再度開くと、スタイルが右下隅が変更されました。Windows ではなくUnixに変更されました。
notepad++ では、xx エンコーディングを使用すると、xx モードで表示されます。別のエンコーディングに変換することもできます（別の暗号化方式が見つかったような気がします）。
URL が中国語のパラメータを渡すと問題が発生します。解決策は次のとおりです。
パラメーターを渡す前に中国語を url エンコーディングに変換し、表示時に utf-8 エンコーディングに変換します。
encodeURI(uname) //转为url编码
decodeURI(url.split("?")[1].split("=")[1]); //url解码为中文
このように構築された Web サイトには大きな問題があります。つまり、URL を直接入力すると対応するインターフェイスにジャンプでき、登録とログインの段階を直接スキップできます。
解決
通常、ブラウザには、ログイン状態とログイン有効時間を記録するセッション (Web フィルター技術) があります。当サイトはすぐに切断されるため、通常10分～15分程度ですが、この時間内に操作を行わなかった場合は、再度更新を行うことで再度ログインできるようになります。これもurl を介した侵入の典型的な方法です。製品が配送されるときにこの問題がある場合、特に銀行や軍事分野では配送が許可されません. この問題がある場合, あなたの製品はゴミです.
美しくする
每个控件设置它的样式。
style = ""; //里面有很多很多选择
要把这些学透，怎么也得十年八年，因此我们需要一点捷径Bootstrap。
ブートストラップ
别人写好的前端样式，直接扒过来用就行。
1. Bootstrap のソースコードをダウンロード 解凍するとcssとjsの 2 つのファイルがあり、すべて他の人が書いたスタイルです。
2. cssフォルダーを、プロジェクト ファイルの下の(自分の) jsフォルダーと並行するフォルダーにコピーして貼り付けます。
3. ダウンロードしたjsフォルダーの下のすべてのファイルを、プロジェクト ファイルの下のjsフォルダーに直接コピーします。
注: インターフェイスでは、純粋な黒、純粋な青、純粋な黄色などの純粋な色を使用しないでください。三原色は醜い。
目的: カラフルな黒を必ず使用してください。
最初に Bootstrap を導入し、xx.html ファイルで次の操作を実行します。
在head->title下面直接复制粘贴如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
在</body>前面（倒数第三行）粘贴如下代码：
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
コントロールが混みすぎている場合は、さらに押してマージンを使用してください
style="margin-bottom: 10px; margin-top: 10px;"
//距离下部10像素，距离上部10像素
通常、ログイン インターフェイスにはアイコンが表示されますが、Alibaba のベクター アイコン ライブラリをお勧めします。お好きなアイコンを選択し、ショッピング カートに追加してダウンロードしてください。この種のアイコンは大きすぎてはならないので、ダウンロード時に 16 ピクセルまたは 32 ピクセルを選択できます.もちろん、画像サイズを自分で変更することもできます.
プロジェクトディレクトリに新しいフォルダー img を作成し、ダウンロードしたアイコンをコピーして img フォルダーに貼り付けます。
元のラベルを img に置き換えます
<label>用户名:</label>
<img src="img/michi.png">
修改图片尺寸
<img src="img/michi.png" style="width: 25px; height: 25px;">
パン粉
次のコードを xx.html ファイルの **** の先頭にコピーします。
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
ブレッドクラムはディレクトリ機能を実装しており、異なるページ間を行き来することができます
今すぐ機能を実現し、インターフェースを美しくします。
美化後のデバッグが難しい場合があるためです。