溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關nodejs如何結合Socket.IO實現websocket即時通訊的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
websocket 是一種網絡通信協議，一般用來進行實時通信會使用到。
websocket 協議和 http 協議類似，http 協議有一個缺陷，只能由客戶方端發起請求，服務端根據請求 url 和傳過去的參數返回對應結果
websocket 是雙向通信的，只要 websocket 連接建立起來，可以由客戶端給服務端發送數據，也可以由服務端主動給客戶端發送數據
websocket 適用場景：網頁版聊天室，網頁版客服，前后端頻繁交換數據的即時通訊場景。
雙向和低延遲的websocket通信包，高性能，高可靠，可伸縮。
（簡單地講，就是將websocket進行封裝和優化。）
Socket.IO 是一個庫，可以在瀏覽器和服務器之間實現實時、雙向和基于事件的通信。 它包括：
server端
client端
官方網址
https://socket.io/
官方文檔
https://socket.io/docs/v4/
以下代碼和時間項目會發布在開源項目【nodejs-study】，歡迎下載和學習
輸入node app 運行服務之后可以通過 http://localhost:3000/ 進行訪問，如果看到輸出監聽3000端口和前端顯示hello world證明項目啟動成功。
前端頁面：一個聊天的UI框，包含發送和接收功能 http://localhost:3000/test
后臺websocket：監聽和答復
首先需要安裝express和socket.io庫
輸入npm install express --save或者yarn add express
輸入npm install socket.io--save或者yarn add socket,io
接下來實現 對 / 和 /test 兩個路徑的監聽
/返回hello world
/test返回html連接頁面
socket.on(“chat message”,callback function)
表示開始監聽"chat message"通道，只要前后端都是一致的通道即可。
socket.emit(“chat message”, msg.toUpperCase());
表示對這個"chat message"通道進行回復，我們暫時是對英文字母做大寫處理并返回。
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
res.send('<h2>Hello world</h2>');
});
app.get('/test', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// io.on('connection', (socket) => {
// console.log('a user connected');
// });
//by zhengkai.blog.csdn.net
//處理socket.on信息并socket.emit回復信息
//這里對接收到的msg做大寫處理
io.on('connection', (socket) => {
//Socket.io by zhengkai.blog.csdn.net
socket.on('chat message', (msg) => {
console.log('received: ' + msg);
socket.emit("chat message", msg.toUpperCase());
});
});
//監聽端口3000
server.listen(3000, () => {
console.log('listening on *:3000');
});這做一些樣式處理，并且有以下body內容：
message的ul，可以用來追加li信息，顯示記錄往來
一個form表單，用來提交要發送的信息
script部分而言，首先使用官方的socket.io 的js client ， 初始化一個連接，添加監聽事件：
輸入非空內容提交后，發送信息給websocket后臺，同事也輸出在信息列表
接收到信息之后，顯示在信息列表
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
//輸出到屏幕
function addMessage(str){
const li = document.createElement("li")
li.innerHTML=str;
messages.appendChild(li);
}
// console.log(form)
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
//Socket.io by zhengkai.blog.csdn.net
let msg = '發送消息:'+input.value ;
console.log(msg)
socket.emit('chat message', input.value);
addMessage(msg);
//清空個輸入框
//input.value = '';
}
});
socket.on("chat message", (arg) => {
let msg = '接收消息:'+arg ;
console.log(msg); // world
addMessage(msg);
});
</script>
</html>感謝各位的閱讀！關于“nodejs如何結合Socket.IO實現websocket即時通訊”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
