nodjs+socket.io+webRTC實現聊天室實錄之環境配置
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
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天后我都不知道幹啥去了。
相關文章
- 利用 Dart-Define 實現 Flutter 多環境配置DartFlutter
- Docker 實戰之 CentOS7 系統環境配置DockerCentOS
- 如何通過配置高效環境實現PHP優化PHP優化
- 通過配置環境來實現PHP高效優化PHP優化
- mit6.828 實驗環境配置MIT
- 淺談RASP技術攻防之實戰[環境配置篇]
- 重新整理 .net core 實踐篇—————配置檔案之環境配置[九]
- [實用] 如何配置 iview 除錯環境View除錯
- [譯]Xcode 環境配置最佳實踐XCode
- RMAN之環境配置(一)
- MacOS Monterey 配置 PHP 環境記錄MacPHP
- uboot環境變數實現分析boot變數
- 作業系統實驗 & bochs 環境配置作業系統
- 配置《Orange's一個作業系統的實現》環境心得作業系統
- spring boot使用logback實現多環境日誌配置Spring Boot
- 配置環境之vscodeVSCode
- 原生Node 實現聊天室
- [記錄]利用workerman在laravel中實現網頁聊天室Laravel網頁
- CentOS大資料實驗環境更改記錄CentOS大資料
- laravel5.4實現實時聊天室Laravel
- lamp環境搭建與phpwind,wordprss實現LAMPPHP
- OVS + dpdk 安裝與實驗環境配置
- 從零開始實踐大模型 - 配置環境大模型
- DevOps: 使用Maven外掛實現分環境配置和版本檢查devMaven
- 大資料實戰之環境搭建(八)大資料
- VirturalBox中搭建CentOS開發環境實錄(一)CentOS開發環境
- vim配置clojure開發環境備忘錄開發環境
- 在非容器環境中實現DevOpsdev
- 實現B/S環境的UI定製UI
- Mac環境下Sublime 3 配置 Anaconda 實現python自動補全MacPython
- app自動化測試環境配置:adb環境配置、monkey環境配置、appium環境配置大全APP
- 實戰生產環境vCenter HA配置(VCSA6.5)
- 容器化環境中,JVM最佳引數配置實踐JVM
- 環境配置
- 實現ARM+ROS(機器人作業系統)之環境搭建!ROS機器人作業系統
- Websocket 直播間聊天室教程 - GoEasy 快速實現聊天室WebGo
- webpack與SPA實踐之開發環境搭建Web開發環境
- 聊天室應用開發實踐(二):實現基於 Web 的聊天室Web