nodjs+socket.io+webRTC實現聊天室實錄之環境配置

本小蛋發表於2020-12-26
JSWeb

nodjs下實現聊天室實錄之環境配置


那個，上個移動終端課肝的不要不要的，都大三了才發現好多基礎知識都不知到，難受難受。。。本人這是第一次發文，記錄一下這些天的學習同時分享給其他學習者，給像我這種小白菜雞看的，不好的地方還請各位大大見諒。

windows下的環境配置

nodjs和npm

這個很簡單，進官網下載安裝就成了：https://nodejs.org/en/
實在不行這裡有教程：百度經驗
這裡要注意的是，windows安裝node.js後，使用的時候用的是 node 而不是nodejs

WebStorm

在本人試過多種工具後，最後還是覺得WebStorm最好用。

申請域名與雲主機

因為在工程中會用到webRTC等東東，這就造成了攝像頭的許可權問題，所以我採用了https協議，而用到https，又需要證照，當然可以自己建，但是我覺得申請個免費域名自帶證照更香，用雲主機也就不用再考慮穿透什麼的了，學習嘛，一步步來，先從簡單開始。
雲主機的要求不高，免費的都成，不過最好是去正牌網站，不然騷擾電話著實可惡。
這裡我採用的是騰訊雲的，花了0r申請了個30天的輕量級應用伺服器，還白送了個域名（之前白花了1R買域名）。點選直達
在這裡插入圖片描述
申請完成後需要將域名跟伺服器ip繫結下，先複製自己的伺服器ip，從右上角進入控制檯，在輸入框輸入“域名註冊”進入域名控制檯。
在這裡插入圖片描述
在“我的域名”下的域名列表中找到自己的域名，點選“解析”
在這裡插入圖片描述

點選“新增記錄”，按下圖所示輸入主機記錄和記錄值，新增完成後點右邊的ssl申請證照，要新增了主機ip才能申請證照。
在這裡插入圖片描述
證照申請成功後“ssl”會亮起來，從左邊的“證照管理”戳進去下載就成。
在這裡插入圖片描述

HTML介面佈局與js伺服器搭建

（一）HTML介面程式碼

因為本文之配環境，所以這裡的程式碼只用來測試。

chatrooom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
    <h1>Hello World!</h1>
</body>
</html>

（二）web伺服器程式碼

nodejs怎麼用我就不寫了，畢竟都是新手，還是別瞎指揮了。貼上個連結吧：w3school-Node.js 建立第一個應用
需要注意的是，伺服器的埠不能用443,80，這種http和https的埠，因為我的域名沒有提交備案，那個好像要20來天，等到時候我都要放假回家了。。
對於檔案路徑：‘/’為專案根目錄，‘./’為當前目錄，‘../’為上一層目錄
server.js

var express = require('express');
var app = express();
var fs = require("fs");
const httpsOption = {//讀取證照檔案‘/’為專案根目錄，‘./’為當前目錄，‘../’為上一層目錄
    key : fs.readFileSync(__dirname+"/ssl/2_www.***.xyz.key"),
    cert: fs.readFileSync(__dirname+"/ssl/1_www.***.xyz_bundle.crt")
}
var https = require("https").createServer(httpsOption,app);//建立https伺服器
var PORT = 8088;//這裡不用https的443，不然問題賊多
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/test.html');
});
https.listen(PORT, () => {
    console.log('listening on port:'+PORT);
});

用WebStorm的話，查錯便可以直接安裝模組，之後右鍵js檔案，點選 “執行‘server.js’”，沒有的話就點上邊的‘執行’。
在這裡插入圖片描述

瀏覽器訪問 https://127.0.0.1:8088 ，執行測試：
在這裡插入圖片描述

配置雲主機環境

（一）連線伺服器軟體下載

這裡要裝的是Xshell和Xftp兩個軟體，用於對申請的伺服器的操作。這倆是相親相愛的一家人！在一起，點選進入官網：NetSarang Computer 官網
填寫如下圖資訊，勾選“兩者”，進行下載安裝。
在這裡插入圖片描述

Xshell

這玩意是用來連線登入的。
安裝完成後點新建回話，按要求填寫資料就成。
在這裡插入圖片描述
如圖所示：
在這裡插入圖片描述

Xftp

這玩意用來傳輸檔案。跟Xshell一樣，不過協議選擇SFTP
在這裡插入圖片描述

（二）雲伺服器安裝nodejs

1、先去 nodejs 官網 https://nodejs.org 看下最新的版本號，記一下。
我們玩長期支援的，不玩最新的。
在這裡插入圖片描述2、然後，編輯如下命令新增源：

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -

將‘setup_14.x’的‘14’換成最新版本，現在最新是14.15.3，因此我將它改為：

	curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

3、等源新增完畢後，直接安裝，命令如下：

	sudo apt-get install -y nodejs

4、等待安裝完成，輸入 nodejs -v看一下版本號：
在這裡插入圖片描述
這樣ubuntu上的nodejs就弄好啦啦啦啦~

（三）部署web到雲伺服器

用xshell連線登入到ubuntu後，用mkdir命令建立個自己喜歡的目錄，我建立了個web資料夾用來存放我的網站資料。

	mkdir web

進入 web資料夾後直接將工程檔案拖進去就成，當然也可以用前面安裝的xftp來圖形化管理。

	cd web

輸入個ls看看你的工程上傳完畢沒有。：
在這裡插入圖片描述
最後進入到工程的根目錄裡，用 nodejs 檔名 就能執行了。
這裡要注意的是，程式執行後是不能斷開ssh連線的，也就是誰xshell不能叉掉。我希望它執行在後臺，於是在執行nodejs命令的時候給它加個‘包裝’，告訴系統這條命令你給我去後臺肝！這個包裝便是nohup 命令 &，原理是什麼我不知道，能用就成了。

	nohup nodejs server&

執行完回個車，它會告訴你這個程式的id，要關掉它就可以用 kill PID 了，如：

	kill 10086

記不住PID或者有時候忘記了？沒事沒事，這裡貼幾個命令，一看就會，一用，還會。

	
	#檢視linux埠使用情況：
	netstat -tln 
	
	#檢視指定埠:
	lsof -i:8088
	
	#如果想關閉使用這個埠的程式，使用kill:
	kill -9 PID號

到時候檢視js伺服器使用的埠即可，這些都會給出埠號。

（四）雲伺服器安裝配置nginx

戳我去看nginx百科介紹

其實這玩意不安也行，都是學習嘛，這麼高大上的玩意兒怎麼說也得玩玩的。
這裡我們暫時只用到反向代理和靜態檔案的設定，話不多說開工開工！

安裝nginx

1、先執行安裝命令：

	sudo apt-get install nginx

2、檢視下是否安裝成功：

	nginx -v

在這裡插入圖片描述
3、nginx檔案安裝完成之後的檔案位置：

  • /usr/sbin/nginx：主程式
  • /etc/nginx：存放配置檔案
  • /usr/share/nginx：存放靜態檔案
  • /var/log/nginx：存放日誌

Nginx 配置 HTTPS

1、輸入 nginx -v 檢視資訊中是否有“ –with-http_ssl_module”,一般都是有的,如果沒有，得自己安一下，我就懶得寫了。
在這裡插入圖片描述
2、新建配置檔案
（1）進入niginx安裝目錄，不同機器會有不同，得自己看著進。

	cd /etc/nginx

（2）新建自定義配置檔案，並新增內容：

	touch conf.d/nginx_https.conf

（3）用vim開啟新建的配置檔案，新增如下內容，當然資訊是要按自己的來。

	vim conf.d/nginx_https.conf

nginx_https.conf

server {
        listen 8088  ssl;  # 1.1版本後這樣寫
        server_name www.joyben.xyz; #填寫繫結證照的域名
        ssl_certificate /home/ubuntu/web/ssl/1_www.***.xyz_bundle.crt;  # 指定證照的位置，絕對路徑
        ssl_certificate_key /home/ubuntu/web/ssl/2_www.***.xyz.key;  # 絕對路徑，同上
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照這個協議配置
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照這個套件配置
        ssl_prefer_server_ciphers on;
        location / {
            proxy_pass https://10.0.4.13:8089;
            root   /home/ubuntu/web/chatroom/public/; #靜態檔案目錄，絕對路徑.
            #nginx配置靜態檔案，將伺服器上的靜態檔案交給nginx處理，從而減輕web的負擔？是這樣的吧？管他呢做就是了。
	
            index  ../chatroom.html;
            expires off;
        }
  }

（4）重啟nginx，瀏覽器測試
到此已經配置好了，輸入 service nginx restart 重啟一下就成，瀏覽器輸入域名:埠試試，443埠就不用輸了，我這裡因為沒有備案，所以用了8088，因為備案據說要20來天，20天后我都不知道幹啥去了。
在這裡插入圖片描述

相關文章