標(biāo)題起的有點(diǎn)大，不過也是實(shí)事求是，接下來跟大家說一下這是腫么回事！
我一個(gè)朋友在一家連鎖機(jī)構(gòu)的信息部入職，你可以把這家連鎖機(jī)構(gòu)想象成蜜雪冰城，但其實(shí)并不是，咋一提蜜雪冰城，腦子里全是“你愛我，我愛你，蜜雪冰城甜蜜蜜”，跑題了，書歸正傳，因?yàn)檫@家連鎖機(jī)構(gòu)在全國有2500家門店，所以我起了上面的標(biāo)題，囧！
我這個(gè)朋友昨天一早就給我發(fā)語音，我一開始忙，沒聽到，后來給他回了過去
他的需求是這樣的：門店里有一個(gè)電子屏設(shè)備，用來給客戶展示門店售賣的產(chǎn)品，但總部希望能控制屏幕上展示的商品，不然每個(gè)店里自己獨(dú)立替換一是很耗精力，另外，總部也不好把控是否有沒替換的門店。所以，他想在電子屏設(shè)備上安裝一個(gè)瀏覽器，瀏覽器上展示一副圖片，當(dāng)總部服務(wù)器的圖片庫已更新，對(duì)應(yīng)的終端設(shè)備上瀏覽器的圖片也同步更新。
其實(shí)這個(gè)需求本質(zhì)上是非常簡(jiǎn)單的，只是當(dāng)時(shí)我手里正在忙其他事情（最近四個(gè)并行需求，真是掉頭發(fā)呀），所以沒怎么聽清楚。
我當(dāng)時(shí)理解的是要做成下圖這樣：一個(gè)客戶端，一個(gè)服務(wù)端，兩端需要像微信那樣雙向通信，服務(wù)器監(jiān)聽一個(gè)文件中圖片的變化，當(dāng)上傳新圖片時(shí)，會(huì)觸發(fā)相應(yīng)的事件并發(fā)送到監(jiān)聽器中，讀取圖片，進(jìn)行編碼，通過websocket傳到客戶端，客戶端進(jìn)行解碼，解出圖片，展示到圖片標(biāo)簽上。思路很清晰，不過我評(píng)估了一下，如果后端用php的swoole框架或者go語言寫，怎么也要一天的時(shí)間，而我最近確實(shí)沒這個(gè)時(shí)間，但這個(gè)朋友在我之前創(chuàng)業(yè)時(shí)確實(shí)幫過我，所以也不能不幫這個(gè)忙，就在我左右為難時(shí)，突然想到了我的AI小助理:ChatGPT（以下簡(jiǎn)稱C老師）。對(duì)呀，這么明確的需求，交給他是再合適不過了，于是乎就答應(yīng)了下來，答應(yīng)這周五給他，其實(shí)我從開始做到服務(wù)器部署好，也就半小時(shí)，真正讓C老師幫我生成代碼的時(shí)間也就10分鐘。
由于我一開始對(duì)這個(gè)問題理解的誤區(qū)， 我先基于上面的方案讓C老師給我相應(yīng)的實(shí)現(xiàn)代碼
我先提問：
我現(xiàn)在有一個(gè)需求，一個(gè)前端頁面展示圖片，圖片是從后端返回的，后端圖片變更后，前端立馬變更為新的圖片，前端可以使用js原生,后端使用php語言，通訊采用websocket
C老師給了我四個(gè)步驟：
PS:跟我之前的思路是一致的，那就按照他的步驟一步步實(shí)現(xiàn)就行了
我讓C老師先幫我實(shí)現(xiàn)他給我建議的第一步：生成后端的代碼
C老師也給我生成了對(duì)應(yīng)的代碼，這里由于篇幅限制，就不貼代碼了。
使用php的swoole框架生成的代碼
我讓C老師先幫我實(shí)現(xiàn)他給我建議的第二步：生成前端代碼
這是gpt生成的客戶端使用websocket請(qǐng)求服務(wù)器的方法
其實(shí)后面還有很多輪交互（主要是懶，就不貼了），都是基于我一開始的方案實(shí)現(xiàn)的，基本上基于以上思路的代碼都實(shí)現(xiàn)了。不過做了一會(huì)以后，我突然靈魂出竅了，不對(duì)，是開竅了，有必要搞的這么麻煩嗎？這樣服務(wù)器也要裝一堆的服務(wù)。
這個(gè)不就是前端瀏覽器每隔一個(gè)固定的時(shí)間去請(qǐng)求一下服務(wù)器上放的靜態(tài)圖片，不管圖片有沒有更新，都重新返回服務(wù)器的圖片，對(duì)啊，就是瀏覽器定時(shí)輪訓(xùn)去請(qǐng)求服務(wù)器，僅此而已。
好吧，現(xiàn)在需求的難度降到了0，不過讓我自己寫，沒個(gè)兩小時(shí)也搞不定，畢竟代碼量在哪放著呢？腫么辦，交給C老師繼續(xù)吧，后面的就比較順利了，不過也遇到了一點(diǎn)小坑。
我問C老師：
請(qǐng)使用原生javascript實(shí)現(xiàn)功能：定時(shí)獲取一張互聯(lián)網(wǎng)的圖片，更新頁面上的圖片鏈接
PS:截圖里有C老師給我生成的代碼，其實(shí)做前端的朋友能看出這段代碼是有點(diǎn)問題的，updateImage函數(shù)引用了外部的img變量，這里由于變量的作用域問題其實(shí)是獲取不到img標(biāo)簽的，也就沒辦法給這個(gè)標(biāo)簽綁定圖片地址，最終，運(yùn)行頁面時(shí)看到的就是不展示圖片。
這段代碼其實(shí)有一點(diǎn)問題
我問：頁面、樣式我也懶得寫，讓C老師繼續(xù)幫我生成頁面代碼
讓C老師幫我生成,設(shè)置圖片全屏展示的樣式：
最終，我把C老師給我的前端代碼進(jìn)行了一下合并，簡(jiǎn)單刪減了兩行代碼，運(yùn)行了一下，沒展示問題，后來排查到就是上面提到的變量局部作用域的問題，所以，要用好C老師，還是需要多多少少懂一點(diǎn)點(diǎn)代碼的。
然后從百度上下載了一張圖片，放上去試了一下，可以展示，附上最終的前端代碼和效果圖：
中間就是那個(gè)定時(shí)器，每隔30秒請(qǐng)求一次服務(wù)器，當(dāng)服務(wù)器上有新的圖片，就會(huì)替換到瀏覽器上的圖片。
瀏覽器呈現(xiàn)的效果圖
至此，瀏覽器端搞定了，服務(wù)器上使用Nginx新建一個(gè)server,然后替換一下index.html首頁，創(chuàng)建static文件夾存放圖片，純靜態(tài)的一個(gè)服務(wù)器就搭建好了，真香！
需要門店更新圖片時(shí)，需要更新一下static文件夾中的圖片，期待30S后門店客戶端中的圖片自動(dòng)更新。
結(jié)果客戶端瀏覽器的圖片沒有更新，一想應(yīng)該是Nginx開啟了緩存配置,改一下配置，強(qiáng)制瀏覽器每次刷新都重新從服務(wù)器獲取新圖片
這里問C老師如何關(guān)閉Nginx緩存功能
然后替換Nginx的配置文件，重啟Nginx使其生效
后記：
其實(shí)這個(gè)地方還可以做很多優(yōu)化，比如前端做成輪播圖的效果，后端可以上傳多種圖片。這種定時(shí)請(qǐng)求對(duì)服務(wù)器其實(shí)還是有一定壓力的，不過因?yàn)楫吘拐?qǐng)求的終端不多，最多也就2000臺(tái)設(shè)備，而且是30S一次，所以這塊服務(wù)器肯定是沒問題的，就沒有進(jìn)一步優(yōu)化了。
中途其實(shí)是遇到了一點(diǎn)小小的困難的，不過還好，很快解決了，如果順利的話，10分鐘時(shí)間足夠交付上面的小項(xiàng)目，所以C老師真的是我的良師益友，遇事不決，先問C老師！
聯(lián)系客服
