Node.js用Socket.IO做聊天軟件的實(shí)現(xiàn)示例
更新時(shí)間:2022年05月11日 11:07:46 作者:鵬程933
本文主要介紹了Node.js用Socket.IO做聊天軟件的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
效果
index.html文件
該頁面主要是渲染聊天界面
<!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; } .message{font-size: 40px;color: skyblue} .name{font-size: 15px;color: pink} </style> </head> <body> <ul id="messages"></ul> <form id="form" action=""> <input id="input" autocomplete="off" name="main" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> let name=prompt("輸入用戶名"); //拿到用戶名后進(jìn)行非空驗(yàn)證 if(name == '' || name == null){ alert("先輸入用戶名") }else { //初始化socket模塊 var socket = io(); socket.emit('name message',name);//向服務(wù)器發(fā)送消息(用戶名信息) let form = document.getElementById('form'); let inputMain = document.querySelector('input[name="main"]'); form.addEventListener('submit', function(e) { e.preventDefault();//取消默認(rèn)提交事件 if (inputMain.value) {//如果文本框中有消息 socket.emit('chat message', inputMain.value);//向服務(wù)器發(fā)送消息(聊天信息) inputMain.value = ''; } }); //渲染服務(wù)器端發(fā)送的用戶名信息(不僅是自己的,還有別的用戶的) socket.on('name message',function (msg){ var item = document.createElement('li'); item.classList.add("name") item.textContent = msg; messages.appendChild(item); }) //渲染服務(wù)器端發(fā)送的聊天信息(不僅是自己的,還有別的用戶的) socket.on('chat message', function(msg) { var item = document.createElement('li'); item.classList.add("message") item.textContent = msg; messages.appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); } </script> </body> </html>
index.js
該文件主要用于聊天信息后端處理
const express = require('express'); const app = express(); const http = require('http'); const server = http.createServer(app); //引入socket.io const {Server}=require('socket.io') const io=new Server(server) app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); io.on('connection',(socket)=>{ let name; socket.on('name message', (msg) => { name=msg; io.emit('name message', name+"已上線"); socket.on("disconnect", (reason) => { io.emit('name message', name+"已斷開"); }); }); socket.on('chat message', (msg) => { io.emit('name message', name); io.emit('chat message', msg); }); }) server.listen(3000, () => { console.log('listening on *:3000'); });
實(shí)現(xiàn)方法
- 需要先下載三方模塊,實(shí)現(xiàn)雙方同行主要依賴于這個(gè)模塊npm i socket.io
- 對(duì)于客戶端分為發(fā)送信息和接收信息
- 發(fā)送請(qǐng)求,當(dāng)監(jiān)聽到提交事件后,拿到文本框內(nèi)容,通過socket.emit()向服務(wù)端發(fā)送信息,這里參數(shù)為事件名,傳輸內(nèi)容,這里還有一個(gè)可選的回調(diào)函數(shù)
- 接受信息,socket.on()監(jiān)聽服務(wù)端發(fā)送過來的信息,這里參數(shù)為事件名,回調(diào)函數(shù),服務(wù)端信息保存在回調(diào)函數(shù)里,通過創(chuàng)建一個(gè)li然后將服務(wù)端發(fā)的信息賦給li,再渲染到頁面
- 對(duì)于服務(wù)端當(dāng)用戶上線或者下線時(shí)向所有用戶發(fā)送提示信息和實(shí)時(shí)接受信息并發(fā)送給所有用戶
- 引入socket.io模塊后,需要將模塊中的Srever結(jié)構(gòu)出來,然后將原生http請(qǐng)求服務(wù)注冊(cè)在socket的服務(wù)中
- 當(dāng)客戶端默認(rèn)請(qǐng)求時(shí),將index.html也就是聊天界面發(fā)送個(gè)客戶端
- 客戶端通過io.on(‘connection’,socket=>{})對(duì)服務(wù)端信息進(jìn)行處理
- socket.on(‘name message’, msg=>{})第一次上線發(fā)送
- socket.on(“disconnect”,reason=>{})斷開連接發(fā)送
- socket.on(‘chat message’,msg=>{})實(shí)時(shí)處理客戶端發(fā)送的信息
到此這篇關(guān)于Node.js用Socket.IO做聊天軟件的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Node.js Socket.IO聊天內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解nodejs微信公眾號(hào)開發(fā)——3.封裝消息響應(yīng)模塊
上一篇文章:nodejs微信公眾號(hào)開發(fā)(2)自動(dòng)回復(fù),實(shí)現(xiàn)了簡單的關(guān)注回復(fù)。采用拼接字符串的形式,并不是很方便,這里我們將其封裝承接口。2017-04-04Node.JS獲取GET,POST數(shù)據(jù)之queryString模塊使用方法詳解
本文將詳細(xì)介紹nodeJS中的queryString模塊使用方法,包括Node.JS獲取GET,POST數(shù)據(jù)的方法,需要的朋友可以參考下2020-02-02關(guān)于Mac下安裝nodejs、npm和cnpm的教程
本文通過圖文并茂的形式給大家介紹了Mac下安裝nodejs、npm和cnpm的教程,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-04-04