WebSocket 程式碼演示

admin發表於2019-04-23
Web

關於WebSocket基本知識可以參閱以下三篇文章：

（1）.WebSocket 用法詳解一章節。

（2）.WebSocket 握手一章節。

（3）.WebSocket API一章節。

下面再分享一段程式碼例項，它演示了WebSocket應用。

node作為執行環境，使用ws搭建一個WebSocket伺服器；也用到了request元件。

關於node和相關元件的安裝這裡就不多介紹，下面直接看程式碼:

客戶端程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
var socket = new WebSocket("ws://localhost:8181");
 
socket.onopen = function(openEvent) {
    console.log("WebSocket conntected.");
};
 
socket.onmessage = function(messageEvent) {
    var data = messageEvent.data;
    console.log(data);
};
 
socket.onerror = function(errorEvent) {
    console.log("WebSocket error: ", errorEvent);
};
 
socket.onclose = function(closeEvent) {
    console.log("WebSocket closed.");
}; 
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    var val=document.getElementById("txt").value;
    if(val==""){
      alert("不能為空");
    }else{
      socket.send(val);
    }
  }
}   
</script>    
</head>
<body>
<input type="text" id="txt"/>
<input type="button" value="提交資料" id="bt"/>
</body>
</html>

伺服器端程式碼如下：

[JavaScript] 純文字檢視 複製程式碼
var request = require('request');
var http=require("http");
 
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8181 });
 
var data=[
  "address:青島市南區",
  "age:4",
  "url:www.softwhy.com"
]
var timer=null;
var count=0;
// 收到來自客戶端的連線請求後，開始給客戶端推訊息
wss.on("connection", function(ws) {
  ws.on("message", function(message) {
    console.log(5);
    if(message =="螞蟻部落"){
      sendMess(ws);
    }
  });
});
 
function sendMess(ws){
  ws.send(data[count]);
  count=count+1;
  if(count==data.length){
    clearTimeout(timer);
    ws.close();
    count=0;
    return;
  }
  timer=setTimeout(sendMess,2000,ws)
}

在客戶端文字框輸入"螞蟻部落"，點選提交按鈕，在伺服器端進行簡單的判斷。

然後通過定時器函式setTimeout()模擬伺服器端新資訊的產生，每隔2秒主動向客戶端傳送一次資訊。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/23/001650i5a5fi5o7o71ral9.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章