iT邦幫忙

0

請問在websocket有辦法渲染html嗎?

如題
有試過在function內宣告iris的ctx出來用,但是好像會被卡住無法執行

如果單純傳資料去前端,再用javascript去修改html的內容也是可以,只是這樣好像就失去後端的作用(變成單純依照前端傳來的資訊去資料庫撈東西)
所以才想用後端渲染的方式完成

語言是golang,框架是iris/websocket

	ws := websocket.New(websocket.DefaultGorillaUpgrader, websocket.Events{
		websocket.OnNativeMessage: func(nsConn *websocket.NSConn, msg websocket.Message) error {
			log.Printf("Server got: %s from [%s]", msg.Body, nsConn.Conn.ID())
			msg.Body = []byte("Here is input") //需要渲染到html的資料
			nsConn.Conn.Write(msg.Body)
			nsConn.Conn.Server().Broadcast(nsConn, msg)
			return nil
		},
	})

程式的主要目的是因應其中一位使用者做出動作的回應可以渲染到所有使用者的畫面上

完整程式碼是參考iris官方文件

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-06-10 23:30:48 檢舉
為啥一定要後端render
froce iT邦大師 1 級 ‧ 2020-06-11 10:46:43 檢舉
會問這問題前後端觀念還不夠清楚。

要後端渲染的話一定得經過一次完整的request/response流程,渲染完成後端管不到前端,所以你用websocket/ajax頂多把資料送回前端,然後前端呼叫後端重新渲染而已。
目前有些IDE插件的 live preview 就是這麼做的,先建個server,然後後端發現你code有變動,用websocket呼叫前端refresh。

然後像聊天室這類的應用絕對不會這樣搞。為啥?因為你一 refresh 後,websocket得重連,我還得動用後端資源把你以前的對話紀錄存下來,再render一次,傻子才這樣做。
skycover iT邦新手 5 級 ‧ 2020-06-11 10:47:06 檢舉
單純覺得前端做render的話後端好像就只有去資料庫查資料的用途
還是說大部分都是使用前端做render?
第一次做不清楚
dragonH iT邦超人 5 級 ‧ 2020-06-11 13:35:28 檢舉
通常都是後端負責 data 再送到前端 render

現在的 front framework 幾乎都是這樣
skycover iT邦新手 5 級 ‧ 2020-06-11 15:00:09 檢舉
如果要render的資料很多,傳送的資料量不會很大嗎?
若只傳送需要修改的部分,當使用者重新整理頁面的時候,頁面又會被初始化
這部分大家都是怎麼處理的?
froce iT邦大師 1 級 ‧ 2020-06-11 16:05:05 檢舉
>單純覺得前端做render的話後端好像就只有去資料庫查資料的用途

要看你應用的場景啊,後端渲染的場景比較適合在更新不那麼頻繁的狀況下,像是報表通常你用後端渲染做會比前端好寫。

然後如果用到vue/react這種通常就是前端搞定大多數問題,後端就輸出資料而已。
froce iT邦大師 1 級 ‧ 2020-06-11 16:11:38 檢舉
>如果要render的資料很多,傳送的資料量不會很大嗎?
只傳送資料總比你傳送整個頁面少很多吧?
頁面還有html結構、css...沒cache的話連圖片都得重傳...

> 若只傳送需要修改的部分,當使用者重新整理頁面的時候,頁面又會被初始化
修改部分在每次修改的時候存進資料庫,然後等refresh的時候一起輸出啊...
skycover iT邦新手 5 級 ‧ 2020-06-11 16:21:40 檢舉
理解 感謝回覆!

1 個回答

5
japhenchen
iT邦大師 1 級 ‧ 2020-06-11 08:25:37

前端用AJAX,後端收到再把資料用JSON回傳,前端收回JSON後再把資料填入網頁中,不用重新RENDER整個頁面

我配JQUERY(懶的三次方)

※前端(.done是收到後端丟來的json格式的data,用$.each把資料直接填回頁面的動作)

    $.post({
            url: "main.php",
            dataType: 'json',
            data: {
                rbmode: "getSingersList",
            }
        })
        .done(function(data) {
            if (data.length > 0) {
                $("#singersList").html("");
                var Adl = $("<dl></dl>");
                $.each(data, function(i, v) {
                    Adl.append(`<dt>${v["kindname"]}</dt>`);
                    var xdd = $("<dd></dd>");
                    $.each(v["data"], function(di, dv) {
                        xdd.append(`<div>${dv}</div>`)
                    });
                    Adl.append(xdd);
                });
                $("#singersList").append(Adl);
            }
        });

※PHP後端(也是個爬蟲,網址就不好意思寫了,免得收到存証信函)

if ($_POST["rbmode"] == "getSingersList") {
    $today = time();
    $sscache = './ktvlist/sscache.list';
    $fileTooOld = false;
    if (file_exists($sscache)) {
        $filedate = filemtime($sscache);
        $fileTooOld = abs($today - $filedate) > (3 * 86400);
    }
    if (!file_exists($sscache) or $fileTooOld) {
        $TotalSingers = array();
        $singerL = array(
            "a" => "華語男歌手",
            "b" => "華語女歌手",
            "c" => "華語團體",
            "e" => "歐美",
            "f" => "日韓"
        );
        foreach (array_keys(array_reverse($singerL)) as $sL) {
            $html = file_get_html("https://某網站/xxxx" . $sL . "1.htm");
            if ($html != "") {
                $sulall = $html->find("ul[class=s_listA]", 0)->find("li");
                $thisL = array();
                foreach ($sulall as $aul) {
                    $detail = $aul->find("a", 0)->innertext;
                    if (!in_array($thisL, $detail)) {
                        array_push($thisL, $detail);
                    }
                }
                array_push($TotalSingers, array(
                    "kindname" => $singerL[$sL],
                    "data" => $thisL
                ));
            }
        }
        if (count($TotalSingers) > 0) {
            $jsonstr = json_encode(array_reverse($TotalSingers));
            file_put_contents($sscache, $jsonstr);
            ob_start();
            echo $jsonstr;
            ob_flush();
        }
    } else {
        ob_start();
        echo file_get_contents($sscache);
        ob_flush();
    }
    die();
    exit();
}

不怕大家看,個人作品與公司無關

我要發表回答

立即登入回答