利用socket.io搭建一個簡易的聊天室
阿新 • • 發佈：2018-12-10
前言
本篇介紹使用node.js模組元件socket.io實現一個非常非常簡易的聊天案例。 本系列文章不對 socket.io 歷史背景做過多闡述，只會通過一個個的案例帶領大家進入socket.io的殿堂，增進小夥伴在socket.io實際開發中的基本使用。 socket.io 官網地址:https://www.socket.io 本篇案例使用到的node.js模組元件： express # 做為 socket 通訊的依賴服務基礎 socket.io # socket 通訊基礎模組
原始碼下載地址：http://pan.baidu.com/s/1mhPJHyg
專案檔案結構
服務端
var http=require("http"); var express=require("express");//引入express var socketIo=require("socket.io");//引入socket.io var app=new express(); var server=http.createServer(app); var io=new socketIo(server);//將socket.io注入express模組 //客戶端 1 的訪問地址 app.get("/client1",function (req,res,next) { res.sendFile(__dirname+"/views/client1.html"); }); //客戶端 2 的訪問地址 app.get("/client2",function (req,res,next) { res.sendFile(__dirname+"/views/client2.html"); }); server.listen(8080);//express 監聽 8080 埠，因為本機80埠已被暫用 //每個客戶端socket連線時都會觸發 connection 事件 io.on("connection",function (clientSocket) { // socket.io 使用 emit(eventname,data) 傳送訊息，使用on(eventname,callback)監聽訊息 //監聽客戶端傳送的 sendMsg 事件 clientSocket.on("sendMsg",function (data) { // data 為客戶端傳送的訊息，可以是 字串，json物件或buffer // 使用 emit 傳送訊息，broadcast 表示 除自己以外的所有已連線的socket客戶端。 clientSocket.broadcast.emit("receiveMsg",data); }) });
客戶端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>客戶端1</title> </head> <body> <label>聊天內容:</label><br/> <textarea id="content" style="height: 200px; width:300px;"></textarea> <br/> <input id="sendMsg" type="text"/> <button id="btn_send">傳送</button> <!-- 首先引入 socket.io 客戶端指令碼--> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript"> var socket = io.connect();//連線服務端，因為本機使用localhost 所以connect(url)中url可以不填或寫 http://localhost // 監聽 receiveMsg 事件，用來接收其他客戶端推送的訊息 socket.on("receiveMsg",function (data) { content.value+=data.client+":"+data.msg+"\r\n"; }); var content=document.getElementById("content"); var sendMsg=document.getElementById("sendMsg"); var btn_send=document.getElementById("btn_send"); btn_send.addEventListener("click",function () { var data={client:"客戶端1",msg:sendMsg.value}; //給服務端傳送 sendMsg事件名的訊息 socket.emit("sendMsg",data); content.value+=data.client+":"+data.msg+"\r\n"; sendMsg.value=""; }); </script> </body> </html>
介面效果如下：
