I built my own website through WebRtc and realized the following functions:
1. Login and registration function
2. Chat hall design
3. Point-to-point video chat
4. Interface beautification
website download
The file created by webstorm does not have a suffix, and it will be downloaded automatically when you enter the website and click the file.
Create a txt file, and add the suffix .txt when naming the new file.
After the code is changed, the browser does not respond, refresh it, or clear the cache. (Browsers are lazy and display the cached content).
Hyperlink
window.location.href = "chat.html?uname="+encodeURI(uname);
//window.location.href = "https://101.200.147.94/zhuaizhuai.jpg";
code notes
.listen(0.0.0.0)表示监听所有端口；
<h1>xxx </h1> //一行字
Chapter 1 Login and Registration Function
In index.html, build the main frame (content displayed on the interface)
The login and registration interface needs to be placed in a box, first come a div
<div align = "center"> //居中对齐，但align已经没在用，但也能起作用
Another table
<table><table>
Next come ranks tr , td
<tr> //行
<td> //列
Come to a label lable
<lable>xxx<lable> //标签
Come to an input box input
<input id = "xxx">
<input id = "pwd" type="password"> //密码输入时隐藏显示黑点点
Come on button button
<button id = "regist">注册</button>
//加点花样
<button id = "regist" style="font-size: 20px">注册</button> //20像素
webstorm+database
Add database to server.js
1. To install sqlite3, any software must be installed in both webstorm and cloud server.
2. If the cloud server installs sqlite3 and reports an error module_not_found (as follows), it may be a version problem. Try installing a lower version of [email protected]. Some new versions of node are not compatible with old versions (cheating).
npm remove software
npm remove xxx
View version number
npm list
new database
var db = null;
db = new sqlite3.Database("app.db",(e)=>{
if(e)
logger.info(e);
else
logger.info("SUC");
});
//因为sql之类的经常容易出问题，需要logger打印一下成功与否
new table
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()
Insert data into the table
sql = "insert into users(name, pwd) values('kkb','123')";//插入用户名kkb和密码123
db.exec(sql,(e)=>{
//执行sql语句，只需要对sql进行调整就行
//随时打印日志
})
执行插入语句：db.exec()
query select
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；
Import socket.io and js files
<script src = "./js/socket.io.js"></script> //网上下载再copy到工程目录下
<script src = "./js/index.js"></script> //自己新建的控制脚本
jump interface
window.location.href = "https://101.200.147.94/zhuaizhuai.jpg";//直接给网址
window.location.href = "regist.html";//同(不是同级目录好像也可以)目录下的文件
plaintext password
socket.emit("regist", uname, pwd);
//都是明文密码，不安全，需要加密，数据库中也是加密后的密码，比如说银行就是这样
window.location.href = "chat.html?uname="+uname;
//网页后面就会拼上一个uname
file/code renaming
shift + f6
//可以改文件名，还可以批量改代码名称
//js全家桶都很好用
Expand and fold the code - +
interface can be changed at will, right click -> check, which one you want to change, but what you change is only the interface of your own browser, and no one else's will be affected.
td colspan="2"
一列占两列空间
get audio device
var constraints = {
video:true,
audio:false
};
navigator.mediaDevices.getUserMedia(constraints)
.then(getStream)
.catch(handleErr)
//成功了.then
//失败了.catch
report error
TypeError: Cannot read properties of undefined (reading 'sockets')
//这个异常一出来就直接崩了，是因为你没有处理这个异常；
//有时候就是会莫名其妙出现各种异常，也找不到原因在哪，那就处理一下异常，防止程序崩溃
exception handling
try{
var myRoom = io.sockets.adapter.rooms[room];
var users = Object.keys(myRoom.sockets).length - 1;
} catch (e) {
logger.info(e);
return;
}
//try一下，然后打印异常
md5 encryption
为了安全，密码绝对不能直接通过网络。必须加密传输。由前端进行加密。
需要引用md5.js文件，网络上别人已经写好了，直接下载拿来用。
hex_md5(pwd);
Chinese question
为了解决中文问题，安利一个好东东notepad++，超级记事本。
Enter a piece of Chinese, and the lower right corner will display the following, indicating that the current style is windows.
Windows style will have a lot of invisible things.
Click to display all characters, and you will find that there are many things other than Chinese, that is, our **\r** and **\n**.
Find and replace, select extension for the search mode (so it knows you are a programmer), replace all **\r\n with \n**, save and close the file and reopen it, you will find that the style in the lower right corner has changed Changed, no longer windows, but Unix .
In notepad++, using xx encoding means viewing in xx mode. It can also be converted to a different encoding (it feels like another encryption method has been found).
There will be problems when url is passing Chinese parameters. The solution is as follows:
convert Chinese to url encoding before passing parameters, and then convert to utf-8 encoding when displaying.
encodeURI(uname) //转为url编码
decodeURI(url.split("?")[1].split("=")[1]); //url解码为中文
There is a big problem with the website built in this way, that is, you can jump to the corresponding interface by directly entering the URL, and skip the registration and login stage directly.
Solution
Generally, browsers will have a session (web filter technology), which records the login status and login valid time time. Because our webpage is immediately disconnected, the time is usually 10-15 minutes. If you do not operate the webpage within the time, you will be able to log in again if you refresh it again. This is also a typical method of penetration through url . If there is this problem when the product is delivered, it is not allowed to be delivered, especially in the banking and military fields. If there is this problem, then your product is rubbish.
beautify
每个控件设置它的样式。
style = ""; //里面有很多很多选择
要把这些学透，怎么也得十年八年，因此我们需要一点捷径Bootstrap。
Bootstrap
别人写好的前端样式，直接扒过来用就行。
1. Download the Bootstrap source code. After decompression, there are two files, css and js , which are all styles written by others.
2. Copy and paste the css folder to the folder parallel to the (own) js folder under the project file.
3. Copy all the files under the downloaded js folder directly to the js folder under the project file .
Refer to the Bootstrap tutorial
Note : The interface should never use pure colors, such as pure black, pure blue, pure yellow. The three primary colors are ugly.
Purpose : Be sure to use colorful black.
First introduce Bootstrap, and perform the following operations in the xx.html file:
在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>
If the controls are too crowded, push it farther and use margin
style="margin-bottom: 10px; margin-top: 10px;"
//距离下部10像素，距离上部10像素
The login interface generally displays icons. We recommend the Alibaba vector icon library , and select the icon you like and add it to the shopping cart to download. This kind of icon should not be too large, so you can choose 16 or 32 pixels when downloading. Of course, you can also modify the image size yourself.
Create a new folder img in the project directory, copy and paste the downloaded icon into the img folder.
Replace the original label with img
<label>用户名:</label>
<img src="img/michi.png">
修改图片尺寸
<img src="img/michi.png" style="width: 25px; height: 25px;">
Breadcrumbs
Copy the following code to the beginning of **** in the xx.html file
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
Breadcrumbs implement the directory function, which can switch back and forth between different pages
Realize the function now, and then beautify the interface.
Because it may be difficult to debug after beautification.