Home
本專案根據 https://github.com/Monoame-Design/bosscoding-examples 所研究出的一份報告
其專案目的是套過 Socket.io 做出一個即時聊天室
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="m in messages">
<h4>{{m.message}}<span>-- {{m.name}}</span></h4>
</li>
</ul>
<div>{{ typing?'有人輸入中...':'' }}</div>
<br>
<!-- 將 name 與 message 綁定到 data 的 temp 物件內 -->
<input v-model="temp.message" placeholder="訊息" @keydown.enter="sendMessage" @keypress="sendTyping" />
<input v-model="temp.name" placeholder="你是誰？" />
<button @click="sendMessage">送出</button>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
messages: [],
temp: {},
socket: null,
typing: false
},
mounted() {
this.socket = socket = io("http://localhost:4040")
// 進入聊天室時，會收到之前的全部訊息，並更新到 messages
this.socket.on("allMessage", obj => {
console.log('received all messages')
console.log(obj)
this.messages = obj
})
// 設定接收到新訊息的監聽器
this.socket.on("newMessage", obj => {
console.log('received new message')
this.messages.push(obj)
})
this.socket.on("someoneIsTyping", value => {
this.typing = value
})
},
methods: {
sendMessage() {
console.log('sending new message')
this.socket.emit("sendMessage", this.temp)
this.temp.message = ""
},
sendTyping() {
this.socket.emit("sendTyping")
}
}
})
</script>
</html>
// var fs = require('fs')
// var https = require('https')
// 如果不需要用 https 的話，要改成引用 http 喔
var http = require('http')
var socketio = require('socket.io')
//https 的一些設定，如果不需要使用 ssl 加密連線的話，把內容註解掉就好
var options = {
// key: fs.readFileSync('這個網域的 ssl key 位置'),
// cert: fs.readFileSync('這個網域的 ssl fullchain 位置')
}
//http & socket port
var server = http.createServer(options);
server.listen(4040)
var io = socketio(server);
console.log("Server socket 4040 , api 4000")
//api port
var app = require('express')();
var port = 4000;
app.listen(port, function () {
console.log('API listening on *:' + port);
});
//用 api 方式取得
app.get('/api/messages', function (req, res) {
let messages = 'hellow world'
res.send(messages);
})
var messages = [
{ name: "Majer", message: "Welcome!" }
]
var typing = false
var timer = null
//用 socket 方式取得
io.on('connection', function (socket) {
console.log('user connected')
socket.emit("allMessage", messages)
socket.on("sendMessage", function (message) {
console.log(message)
messages.push(message)
io.emit("newMessage", message)
})
socket.on('sendTyping', function () {
console.log('typing')
typing = true
io.emit("someoneIsTyping", typing)
clearTimeout(timer)
timer = setTimeout(() => {
typing = false
io.emit("someoneIsTyping", typing)
}, 3000)
})
})
Socket.IO 是一個面向即時 web 應用的 JavaScript 庫。它使得伺服器和客戶端之間即時雙向的通信成為可能。他有兩個部分：在瀏覽器中執行的客戶端庫，和一個面向Node.js的伺服器端庫。兩者有著幾乎一樣的API。像Node.js一樣，它也是事件驅動的。
(by維基百科)
1.建立資料夾並進入(在VScode環境下，開啟Terminal)
mkdir socket-server
cd socket-server
2.安裝socket.io與express（網頁伺服器框架）
npm i socket.io express -s
建立 index.js(程式碼為上方JS檔)，並執行
node index.js
當出現以下圖片代表連線成功
從這專案我了解到Socket.io可以進行客戶端和服務端的雙向通訊，並且利用這個觀念可以結合Arduino進行簡單的物聯網搭建--利用網頁控制Arduino。