時(shí)間：2023-07-22 10:51:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-22 10:51:01 來源：網(wǎng)站運(yùn)營
從0開始用Nodejs做一個(gè)聊天室：
在線咨詢
node -v 與 npm -v，顯示版本號(hào)就說明安裝沒有問題了。node-chat，在里面我們新建兩個(gè)文件，一個(gè)是server.js，一個(gè)是index.html，注意后綴名。npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install --save expresscnpm install --save socket.iovar app = require('express')(); //引入express庫var http = require('http').Server(app); //將express注冊(cè)到http中//當(dāng)訪問根目錄時(shí)，返回Hello Worldapp.get('/', function(req, res){ res.send('<h1>Hello world</h1>');});//啟動(dòng)監(jiān)聽，監(jiān)聽3000端口http.listen(3000, function(){ console.log('listening on *:3000');});node server.jslocalhost:3000回車。index.html中輸入以下代碼：<!doctype html><html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>發(fā)送</button> </form> </body></html>server.js中的app.get('/', function(req, res){ res.send('<h1>Hello world</h1>');});app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});node server.js。localhost:3000，已經(jīng)跳轉(zhuǎn)到聊天頁面了。var app = require('express')();var http = require('http').Server(app);//new additionvar io = require('socket.io')(http);//endapp.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});//new additionio.on('connection', function(socket){ console.log('a user connected');});//endhttp.listen(3000, function(){ console.log('listening on *:3000');});index.html，添加下方標(biāo)注內(nèi)容：<!doctype html><html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> //new addition <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> //end </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>發(fā)送</button> </form> </body> //new addition <script src="/socket.io/socket.io.js"></script> <script> var socket = io() </script> //end</html>localhost:3000。就會(huì)有以下結(jié)果。li標(biāo)簽好了。在index.html的script中寫一個(gè)方法，后面顯示什么內(nèi)容，就調(diào)用這個(gè)方法在面模板中插入一條li就好了。index.html中。function addLine(msg) { $('#messages').append($('<li>').text(msg));}index.html的script最前面，我們先彈出一個(gè)prompt()來詢問用戶的昵稱，然后將用戶名發(fā)送給后端，讓后端告訴大家這個(gè)用戶進(jìn)來了接。join，然后后端會(huì)處理這個(gè)事件。<script> var name = prompt("請(qǐng)輸入你的昵稱："); var socket = io() //發(fā)送昵稱給后端 socket.emit("join", name) function addLine(msg) { $('#messages').append($('<li>').text(msg)); }</script>usocket數(shù)組來保存每一個(gè)用戶的socket實(shí)例。join事件，在接收到昵稱之后，將該用戶的加入聊廣播給所有用戶。server.js代碼如下：為了限制篇幅長度，從此處開始貼上來的代碼有省略，請(qǐng)參考上下文確定位置。
var usocket = []; //全局變量...io.on('connection', function(socket){ console.log('a user connected') //監(jiān)聽join事件 socket.on("join", function (name) { usocket[name] = socket io.emit("join", name) //服務(wù)器通過廣播將新用戶發(fā)送給全體群聊成員 })});...index.html的script中添加以下代碼，接受到新用戶加入事件的處理：...//發(fā)送昵稱給后端socket.emit("join", name)//收到服務(wù)器發(fā)來的join事件時(shí)socket.on("join", function (user) { addLine(user + " 加入了群聊")})...node server.js開啟后端服務(wù)，然后訪問localhost:3000，輸入用戶名iimTXXX的聊天。...//發(fā)送昵稱給后端，并更改網(wǎng)頁titlesocket.emit("join", name)document.title = name + "的群聊" //new addition...form的提交綁定一個(gè)事件，讓它來處理新消息的發(fā)送。$('form').submit(function () { //solve code})var msg = $("#m").val()message吧，發(fā)送的數(shù)據(jù)就是msg。socket.emit("message", msg) //將消息發(fā)送給服務(wù)器$("#m").val("") //置空消息框form的提交事件。return false //阻止form提交form綁定的事件如下：...//當(dāng)發(fā)送按鈕被點(diǎn)擊時(shí)$('form').submit(function () { var msg = $("#m").val() //獲取用戶恮的信息 socket.emit("message", msg) //將消息發(fā)送給服務(wù)器 $("#m").val("") //置空消息框 return false //阻止form提交})...message事件message吧。io.on('connection', function(socket){ console.log('a user connected') socket.on("join", function (name) { usocket[name] = socket io.emit("join", name) }) //new addition socket.on("message", function (msg) { io.emit("message", msg) //將新消息廣播出去 })});message事件，將新消息呈現(xiàn)在面板中。...socket.on("join", function (user) { addLine(user + " 加入了群聊")})//接收到服務(wù)器發(fā)來的message事件socket.on("message", function(msg) { addLine(msg)})//當(dāng)發(fā)送按鈕被點(diǎn)擊時(shí)$('form').submit(function () { var msg = $("#m").val() //獲取用戶輸入的信息...整個(gè)過程相當(dāng)于，用戶a將自己的消息用message事件發(fā)送給服務(wù)器，服務(wù)器監(jiān)聽message事件接收其中的消息，將消息用事件message廣播給全體用戶，全體用戶監(jiān)聽message事件，將事件接受到的消息呈現(xiàn)在聊天框中。PS:這一段是整個(gè)socket編程的核心，可以多讀幾遍細(xì)細(xì)理解。
node server.js。localhost:3000，回車，填寫昵稱為iimT。localhost:3000，回車，填寫昵稱為iimY。我是iimT, 一個(gè)固執(zhí)的技術(shù)直男。
我的微博 : @_iimT
我的微信公眾號(hào) : iimT
個(gè)人博客：
關(guān)鍵詞：
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
