本篇將介紹如何快速、簡便地使用 socket.io 庫搭建一個 web 在線聊天室，前端并沒有使用任何框架，后端使用 express 框架搭建簡易的后端，
socket.io 庫本質上是基于 websocket 上進行封裝，改變了以往只能前端發送請求，后端才能回傳給前端資訊，這樣的一問一答形式，實作了前后端雙向通信，即后端也可以主動 push 資訊到前端，websocket 尤其適用于在線聊天或者實時互動的場景，已經廣泛用于直播平臺、視頻平臺等，
本篇實作：
最基本的前后端資訊互動，
代碼地址：
https://github.com/billmian/socketio-chat
技術堆疊：
- 前端 html + socketio
- 后端 express 框架
首先先創建 index.html 和 index.js 兩個檔案
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>
</head>
<body></body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.emit("newChatMessage", "這是傳送給后端的訊息");
socket.on("broadCastMessage", (msg) => {
console.log("這里輸出后端回傳的訊息", msg);
renderContent(msg);
});
</script>
</html>
index.js 檔案中：
先使用 npm 安裝庫 socket.io express
npm install socket.io express --save
var express = require("express");
var app = express();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
io.on("connection", (socket) => {
socket.on("newChatMessage", (msg) => {
console.log("message: " + msg);
io.emit("broadCastMessage", "后端傳過來的訊息");
});
});
http.listen(3000, () => {
console.log("listening on *:3000");
});
然后在檔案目錄下運行
node index.js
然后在瀏覽器中打開 http://localhost:3000
然后使用 F12 打開控制臺可以看到
前端已經輸出了后端傳過來的訊息
再回到運行 nodejs 的終端
可以看到后端也接受到了前端傳來的訊息，
至此我們實作了使用 socketio 進行了前后端的 websocket 的互動，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/238526.html
標籤：其他
下一篇：Vue.js 入門