一個最簡單的WebSocket hello world demo

時間 2019-12-12

標籤一個最簡單 websocket hello world demo 简体版

原文原文鏈接

服務器端代碼不超過42行：html

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端口上：node

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

代碼裏所需的server.js我已經上傳到個人Github上了：
https://github.com/i042416/Kn...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上：socket

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。