伺服器端程式碼不超過42行：

const WSServer = require("./server.js");var counter = 0;function createWebsocket() {  var host = "127.0.0.1";  var port = "9999";  var wsServer =  WSServer.startServer(host, port);  console.log("WebSocket server listens to: " + host + ":" + port);
  wsServer.on('open', (data) => {    console.log('WS Client has connected: ' + data);
    setInterval(function(){ 
      counter++;
      WSServer.broadcast("Jerry: " + counter );
     }, 3000);
    
  });
  wsServer.on('dataWS', (data) => {    console.log('Receive Data from WebUI : ' +  data);
  });
  wsServer.on('disconnect', (data) => {    console.log('WSServer disconnect:' + data.name);
  });
  wsServer.on('close', (data) => {    console.log('WSServer close: ' + data.name);
  });
  wsServer.on('end', (data) => {    console.log('WSServer Close: '+data.name);
  });
  wsServer.on('error', (data) => {
  });
}
createWebsocket();

程式碼第10行建立一個WebSocket伺服器，監聽在9999埠上：

第15～18行每隔3秒傳送一個字串到瀏覽器，用一個計數器標識每次傳送的請求。

程式碼裡所需的server.js我已經上傳到我的Github上了：

使用nodejs啟動這個伺服器：

網頁端程式碼：

<html><script src="socket.io.dev.js"></script><script>console.log("1");  var socket = io('ws://127.0.0.1:9999');
  socket.on('connect', function(){    console.log("connected!");
  });
  socket.on('event', function(data){    console.log("event: " + data);
  });
  socket.on('news', function(data){    console.log("data from server: " + JSON.stringify(data,2,2));
  });
  socket.on('disconnect', function(){    console.log("disconnect...");
  });</script></html>

瀏覽器端每隔三秒收到伺服器推送的訊息，列印在console上：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

一個最簡單的WebSocket hello world demo

相關文章