Node.js/基本範例程式/共筆白板:修訂版本之間的差異
出自福留子孫
(新頁面: 分類:Node.js) |
|||
第 1 行: | 第 1 行: | ||
[[分類:Node.js]] | [[分類:Node.js]] | ||
+ | <pre> | ||
+ | var app = require('express')(); //引入 Express 模組,並建立一個 Express 的應用程式實例。 | ||
+ | var http = require('http').Server(app); //建立一個 HTTP 伺服器實例,並將 Express 應用程式實例作為參數傳入。 | ||
+ | var io = require('socket.io')(http); //引入 Socket.io 模組,並將 HTTP 伺服器實例作為參數傳入,建立一個 Socket.io 伺服器實例。 | ||
+ | |||
+ | const port = 8080; //定義網頁應用程式的埠號為 8080 | ||
+ | |||
+ | app.get('/', function(req, res){ //設定當使用者訪問根路徑時,回傳一個 HTML 文件(這裡是 Socket_test.html)。 | ||
+ | res.sendfile('Socket_test.html'); | ||
+ | }); | ||
+ | |||
+ | io.on('connection', function(socket){ //監聽 Socket.io 的 connection 事件,當有使用者連接時,執行回調函式。 | ||
+ | console.log('a user connected'); | ||
+ | }); | ||
+ | http.listen(port); //啟動 HTTP 伺服器,並監聽指定的埠號。 | ||
+ | |||
+ | io.sockets.on('connection', function(socket) { | ||
+ | |||
+ | /* 登入初始化 */ | ||
+ | socket.on('login', function(data) //監聽 'login' 事件,當有使用者登入時,執行回調函式。 | ||
+ | { | ||
+ | /* 伺服端訊息 */ | ||
+ | console.log("connected"); | ||
+ | |||
+ | /* 宣告物件,放置訊息 */ | ||
+ | var obj = new Object; | ||
+ | obj.name = data.name; | ||
+ | obj.msg = data.name + ' 已上線'; | ||
+ | console.log(obj.msg); | ||
+ | |||
+ | /* 將在前端輸入的名稱記錄下來 */ | ||
+ | socket.name = data.name; | ||
+ | |||
+ | /* 將自己上線訊息傳給自己的網頁 */ | ||
+ | io.emit('msg', obj); | ||
+ | |||
+ | /* 告訴其他人你上線了 */ | ||
+ | socket.broadcast.emit('msg', obj); | ||
+ | }); | ||
+ | |||
+ | /* 接受、發送訊息 */ | ||
+ | socket.on('sendMessage', function(data){ //監聽 'sendMessage' 事件,當有使用者傳送訊息時,執行回調函式。 | ||
+ | |||
+ | /* 發送receiveMessage事件 */ | ||
+ | data.message = socket.name +" 說: "+ data.message; | ||
+ | io.sockets.emit('receiveMessage', data) | ||
+ | }) | ||
+ | |||
+ | /* 接受畫布作業訊息 */ | ||
+ | socket.on('draw', function(data){ //監聽 'draw' 事件,當有使用者在畫板上繪圖時,執行回調函式。 | ||
+ | |||
+ | /* 將畫布作業訊息傳給其他線上的人 */ | ||
+ | socket.broadcast.emit('show', data); | ||
+ | }); | ||
+ | |||
+ | socket.on('disconnect', function() { //監聽斷開連接事件,當使用者離開時,執行回調函式。 | ||
+ | |||
+ | /* 宣告物件,放置訊息 */ | ||
+ | var obj = new Object; | ||
+ | obj.msg = socket.name + ' 已離開'; | ||
+ | console.log(obj.msg); | ||
+ | |||
+ | /* 通知所有人自己已經離開 */ | ||
+ | io.sockets.emit('msg', obj); | ||
+ | }); | ||
+ | }); | ||
+ | </pre> |
2023年3月22日 (三) 10:05的修訂版本
var app = require('express')(); //引入 Express 模組,並建立一個 Express 的應用程式實例。 var http = require('http').Server(app); //建立一個 HTTP 伺服器實例,並將 Express 應用程式實例作為參數傳入。 var io = require('socket.io')(http); //引入 Socket.io 模組,並將 HTTP 伺服器實例作為參數傳入,建立一個 Socket.io 伺服器實例。 const port = 8080; //定義網頁應用程式的埠號為 8080 app.get('/', function(req, res){ //設定當使用者訪問根路徑時,回傳一個 HTML 文件(這裡是 Socket_test.html)。 res.sendfile('Socket_test.html'); }); io.on('connection', function(socket){ //監聽 Socket.io 的 connection 事件,當有使用者連接時,執行回調函式。 console.log('a user connected'); }); http.listen(port); //啟動 HTTP 伺服器,並監聽指定的埠號。 io.sockets.on('connection', function(socket) { /* 登入初始化 */ socket.on('login', function(data) //監聽 'login' 事件,當有使用者登入時,執行回調函式。 { /* 伺服端訊息 */ console.log("connected"); /* 宣告物件,放置訊息 */ var obj = new Object; obj.name = data.name; obj.msg = data.name + ' 已上線'; console.log(obj.msg); /* 將在前端輸入的名稱記錄下來 */ socket.name = data.name; /* 將自己上線訊息傳給自己的網頁 */ io.emit('msg', obj); /* 告訴其他人你上線了 */ socket.broadcast.emit('msg', obj); }); /* 接受、發送訊息 */ socket.on('sendMessage', function(data){ //監聽 'sendMessage' 事件,當有使用者傳送訊息時,執行回調函式。 /* 發送receiveMessage事件 */ data.message = socket.name +" 說: "+ data.message; io.sockets.emit('receiveMessage', data) }) /* 接受畫布作業訊息 */ socket.on('draw', function(data){ //監聽 'draw' 事件,當有使用者在畫板上繪圖時,執行回調函式。 /* 將畫布作業訊息傳給其他線上的人 */ socket.broadcast.emit('show', data); }); socket.on('disconnect', function() { //監聽斷開連接事件,當使用者離開時,執行回調函式。 /* 宣告物件,放置訊息 */ var obj = new Object; obj.msg = socket.name + ' 已離開'; console.log(obj.msg); /* 通知所有人自己已經離開 */ io.sockets.emit('msg', obj); }); });