Nodejs+Socket.io實(shí)現(xiàn)通訊實(shí)例代碼
更新時(shí)間：2017年02月13日 15:50:07 作者：leslie·Zhao
本篇文章主要介紹了Nodejs+Socket.io實(shí)現(xiàn)通訊實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
目錄結(jié)構(gòu)
D:. │ package.json │ server.js │ └─public index.html socket.io.js
需要的條件
- socket.io.js 供前端界面初始化io
- socket.io 供NodeJs端提供socket方法
socket.io.js存在于socket.io-client
socket.io存在于socket.io
演示的功能
- 客戶端發(fā)送消息給服務(wù)端
- 后端觸發(fā)事件告知客戶端
- 客戶端離開(kāi)觸發(fā)服務(wù)端事件
服務(wù)端
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
app.use('/', express.static(__dirname + '/public'));
server.listen(80);
//socket部分
io.on('connection', function(socket) {
//接收并處理客戶端的hi事件
socket.on('hi', function(data) {
console.log(data);
//觸發(fā)客戶端事件c_hi
socket.emit('c_hi','hello too!')
})
//斷開(kāi)事件
socket.on('disconnect', function(data) {
console.log('斷開(kāi)',data)
socket.emit('c_leave','離開(kāi)');
//socket.broadcast用于向整個(gè)網(wǎng)絡(luò)廣播(除自己之外)
//socket.broadcast.emit('c_leave','某某人離開(kāi)了')
})
});
- connection用來(lái)處理socket鏈接事件
- disconnect處理連接斷開(kāi)事件
- 后端接受前端事件通過(guò)
socket.on(EventName,function(date){}) - 后端觸發(fā)前端事件通過(guò)
socket.emit(EventName,msg)
這個(gè)后端演示了,前端發(fā)送消息給后端，觸發(fā)hi事件，hi事件通過(guò)回調(diào)在觸發(fā)客戶端定義的c_hi事件告知前端。
客戶端
index.html
<!DOCTYPE html>
<html>
<head>
<title>socket</title>
</head>
<body>
<button id="sendBtn">發(fā)送消息</button>
<button id="leaveBtn">離開(kāi)</button>
</body>
<script type="text/javascript" src="./socket.io.js"></script>
<script type="text/javascript">
var socket=io.connect('localhost:80'),//與服務(wù)器進(jìn)行連接
send=document.getElementById('sendBtn'),
leave=document.getElementById('leaveBtn');
send.onclick=function(){
socket.emit('hi', 'hello!');
}
leave.onclick=function(){
window.location.href="about:blank" rel="external nofollow" ;
window.close()
socket.emit('leave', 'leave');
}
//接收來(lái)自服務(wù)端的信息事件c_hi
socket.on('c_hi',function(msg){
alert(msg)
})
// socket.on('c_leave',function(msg){
// alert(msg)
// })
</script>
</html>
- 發(fā)送消息按鈕用來(lái)給服務(wù)端發(fā)送信息，觸發(fā)服務(wù)端定義的hi事件。
- 離開(kāi)頁(yè)面按鈕用來(lái)離開(kāi)頁(yè)面，也就是socket會(huì)自動(dòng)斷開(kāi)。觸發(fā)服務(wù)端定義的disconnect。
源碼下載：Socket_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Nodejs對(duì)postgresql基本操作的封裝方法
今天小編就為大家分享一篇Nodejs對(duì)postgresql基本操作的封裝方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于利用nvm管理多個(gè)版本的node.js與npm的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
理解nodejs的stream和pipe機(jī)制的原理和實(shí)現(xiàn)
本篇文章主要介紹了理解nodejs的stream和pipe機(jī)制的原理和實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
詳解nodejs http請(qǐng)求相關(guān)總結(jié)
這篇文章主要介紹了nodejs http請(qǐng)求相關(guān)總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
NodeJs環(huán)境安裝與配置的實(shí)現(xiàn)步驟
本文主要介紹了NodeJs環(huán)境安裝與配置,包括配置環(huán)境和配置國(guó)內(nèi)鏡像，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
Nodejs連接mysql并實(shí)現(xiàn)增、刪、改、查操作的方法詳解
這篇文章主要介紹了Nodejs連接mysql并實(shí)現(xiàn)增、刪、改、查操作的方法,結(jié)合實(shí)例形式詳細(xì)分析了nodejs針對(duì)mysql數(shù)據(jù)庫(kù)的的連接、mysql數(shù)據(jù)庫(kù)的創(chuàng)建及nodejs針對(duì)mysql增刪改查等相關(guān)操作具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
Node.js DES加密的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇Node.js DES加密的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
在Node.js中將SVG圖像轉(zhuǎn)換為PNG，JPEG，TIFF，WEBP和HEIF格式的方法
這篇文章主要介紹了在Node.js中將SVG圖像轉(zhuǎn)換為PNG，JPEG，TIFF，WEBP和HEIF格式的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了NodeJS使用七牛云存儲(chǔ)上傳文件的方法,使用七牛云存儲(chǔ)上傳文件確認(rèn)安裝node和npm，具體服務(wù)器端的云存儲(chǔ)操作方法大家參考下本文吧2017-07-07
本篇文章主要介紹了解析NodeJS異步I/O的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04