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

本小蛋發表於2020-12-26


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

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,這種httphttps的埠,因為我的域名沒有提交備案,那個好像要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天后我都不知道幹啥去了。
在這裡插入圖片描述

相關文章