HTML網頁+nodejs實現websocket
阿新 • • 發佈：2019-02-02
本程式利用HTML5和nodejs中封裝好的websocketAPI實現了簡單的功能，作此筆記
功能簡單，就是向後臺傳送輸入框中的內容，然後後臺再把接收到的訊息傳回前端顯示出來，具體程式碼如下：
HTML網頁程式碼：
<!doctype html> <html> <head> <meta charset='utf-8'> </head> <body> <button id='send'>傳送</button> <input type='text' id='inputText'> <p id='dispStatus'>正在連線...</p> <script> var inputText=document.getElementById('inputText');//讀輸入框的控制代碼 var dispStatus=document.getElementById('dispStatus');//讀按鈕的控制代碼 var ws=new WebSocket('ws://10.138.244.142:8000');//建立websocket連線，，服務端的IP+埠號 ws.onopen=function(e){//開始建立連線時的事件，顯示連線成功 dispStatus.innerHTML='連線成功'; } document.getElementById('send').onclick=function(e){//按鈕按下觸發事件， ws.send(inputText.value);//按下按鈕向服務端傳送輸入框中的值 } ws.onmessage=function(e){//讀取服務端接收到的資訊 dispStatus.innerHTML=e.data;//將資訊顯示出來 } </script> </body> </html>
nodejs後臺程式碼：
var ws=require("nodejs-websocket");//引入websocket模組 console.log("開始建立連線...");//後臺列印狀態資訊 var server=ws.createServer(function(connect){//建立一個新連線 connect.on("text",function(msg){//接收觸發事件 console.log("收到的訊息是："+msg);//接收到新訊息之後在後臺打印出來 if(msg){//如果訊息不是空，將接收到的訊息傳送給客戶端 connect.send('接收到的訊息是：'+msg); } }); }).listen(8000)
在此過程中遇到的問題，HTML程式碼中<script>指令碼程式放在<head>中不能用，一直連線不上後臺，但是放在<body>中就可以，不知道為什麼
