Nodejs實現(xiàn)WebSocket代碼實例
一、環(huán)境配置
1.下載安裝nodejs https://nodejs.org/en/download/
2.安裝完成后打開cmd命令,執(zhí)行node --version,看看是否安裝成功,如果提示沒有此命令,去配置下環(huán)境變量,正常情況下安裝后自動設(shè)置環(huán)境變量
二、配置nodejs模塊
1.安裝express模塊
模塊介紹:Express 是一個簡潔而靈活的 node.js Web應(yīng)用框架, 提供了一系列強大特性幫助你創(chuàng)建各種 Web 應(yīng)用,和豐富的 HTTP 工具。
安裝方式:在項目路徑下執(zhí)行npm install express
三、HelloWord
1.創(chuàng)建一個目錄,作為項目目錄
2.創(chuàng)建一個demo.js
var express = require('express'),//讓其變?yōu)閣eb模式 app = express(), server = require('http').createServer(app);//引入http訪問模式并綁定服務(wù) server.listen(8000);//添加訪問端口 app.get('/', function (req, res) { res.send('Hello World');//當(dāng)訪問Ip:8000時,頁面即可顯示 })
3.在項目目錄下按住shift右鍵,選擇‘在此處打開命令窗口'執(zhí)行node demo.js 未報錯即啟動成功
4.在瀏覽器訪問ip:port即可輸出
四、訪問頁面
1.在項目路徑創(chuàng)建頁面文件夾pages,并創(chuàng)建html頁面a.html
2.在剛剛創(chuàng)建的demo.js中添加如下代碼
var express = require('express'),//讓其變?yōu)閣eb模式 app = express(), server = require('http').createServer(app);//引入http訪問模式并綁定服務(wù) server.listen(8000);//添加訪問端口 app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下創(chuàng)建a.html頁面,可使用ip:8000/a.html訪問到 //app.use('/', express.static(__dirname + '/pages1'));//可配置多路徑,但默認(rèn)會自上往下查找,找到后即返回,終止查找 app.get('/', function (req, res) { res.send('Hello World');//當(dāng)訪問Ip:8000時,頁面即可顯示 })
3.重啟后訪問ip:port/a.html即可訪問到該頁面
五、引用其他js
1.在項目根目錄創(chuàng)建include.js,內(nèi)容如下
var hello = { sayHello:function(name){ return 'hello,'+name+',this is include.js'; } } module.exports=hello;
2.在demo.js中添加
var express = require('express'),//讓其變?yōu)閣eb模式 app = express(), include =require('./include.js'),//進入js server = require('http').createServer(app);//引入http訪問模式并綁定服務(wù) server.listen(8000);//添加訪問端口 app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下創(chuàng)建a.html頁面,可使用ip:8000/a.html訪問到. "__dirname"為項目路徑默認(rèn)變量 app.get('/', function (req, res) { res.send(include.sayHello("demo")); })
六、解析請求參數(shù)
1.在demo.js中添加后請求鏈接http://ip:port/?p1=p&p2=2
var express = require('express'),//讓其變?yōu)閣eb模式 app = express(), url = require('url'), server = require('http').createServer(app);//引入http訪問模式并綁定服務(wù) server.listen(8000);//添加訪問端口 app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下創(chuàng)建a.html頁面,可使用ip:8000/a.html訪問到. "__dirname"為項目路徑默認(rèn)變量 app.get('/', function (req, res) { // 解析 url 參數(shù) var params = url.parse(req.url, true).query; res.write("網(wǎng)站名:" + params.p2); res.write("\n"); res.write("網(wǎng)站 URL:" + params.p1); res.end(); })
七、發(fā)送http請求
1.post
在demo.js中添加如下內(nèi)容后訪問http://mykl:8000/? parameter=2
var express = require('express'),//讓其變?yōu)閣eb模式 app = express(), url = require('url'), util = require('util'), include =require('./include.js'), server = require('http').createServer(app);//引入http訪問模式并綁定服務(wù) server.listen(8000);//添加訪問端口 app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下創(chuàng)建a.html頁面,可使用ip:8000/a.html訪問到. "__dirname"為項目路徑默認(rèn)變量 //app.use('/', express.static(__dirname + '/pages1'));//可配置多路徑,但默認(rèn)會自上往下查找,找到后即返回,終止查找 app.get('/', function (req, res) { // 解析 url 參數(shù) var params = url.parse(req.url, true).query; post('https://cang.mini-kaola.cn/pages/MobileWeb/getStorageDatil.htm',{cangId: params.cangid},function(data){ res.write(data); res.end(); }); }) function post(url,data,fn){ data=data||{}; var content=require('querystring').stringify(data);//獲得請求的參數(shù) var parse_u=require('url').parse(url,true); var isHttp=parse_u.protocol=='http:'; var options={ host:parse_u.hostname, port:parse_u.port||(isHttp?80:443), path:parse_u.path, method:'POST', headers:{ 'Content-Type':'application/x-www-form-urlencoded', 'Content-Length':content.length } }; var req = require(isHttp?'http':'https').request(options,function(res){//發(fā)送請求 var _data=''; res.on('data', function(chunk){ _data += chunk; }); res.on('end', function(){ fn!=undefined && fn(_data); }); }); req.write(content); req.end(); }
2.get
在demo.js中添加如下內(nèi)容后訪問http://mykl:8000/?parameter=2
var express = require('express'),//讓其變?yōu)閣eb模式 app = express(), http=require('http'), url = require('url'), include =require('./include.js'), server = http.createServer(app);//引入http訪問模式并綁定服務(wù) server.listen(8000);//添加訪問端口 app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下創(chuàng)建a.html頁面,可使用ip:8000/a.html訪問到. "__dirname"為項目路徑默認(rèn)變量 //app.use('/', express.static(__dirname + '/pages1'));//可配置多路徑,但默認(rèn)會自上往下查找,找到后即返回,終止查找 app.get('/', function (req, res) { // 解析 url 參數(shù) var params = url.parse(req.url, true).query; //get 請求外網(wǎng) http.get("http://mykl/storage/pages/MobileWeb/getStorageDatil.htm?cangId="+params.cangid,function(req1,res1){ var html=''; req1.on('data',function(data){ html+=data; }); req1.on('end',function(){ res.write(html); res.end(); }); }); })
八、socket
1.安裝socket模塊
npm install socket.io
2.進入上一步安裝的模塊路徑,找到socket.io.js
3.在page下創(chuàng)建一個html,并引用上面的js
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>socket</title> </head> <body> <dev id="show"/> <br/> <input type="text" id="nickname"/>昵稱<br/> <input type="text" id="inmsg"/> <input type="button" id="sendBtn" value="發(fā)送" /> <br/> </body> <script src="socket.io.js"></script> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ var socket=io.connect();//與服務(wù)器進行連接 $('#sendBtn').click(function(){ var nickname = $('#nickname').val(); var fatext = $('#inmsg').val(); if(fatext!=""){ socket.emit('famsg', nickname+"-"+new Date().toTimeString().substr(0, 8)+":"+fatext+"<br/>"); } }); socket.on('jiemsg', function(msg) { $("#show").append(msg); }); }); </script> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Nodejs關(guān)于gzip/deflate壓縮詳解
本文主要向大家介紹了nodejs中關(guān)于gzip/deflate壓縮的2種方法,分別是管道壓縮和非管道壓縮,十分詳細,并附帶示例,這里推薦給大家參考下。2015-03-03node.js學(xué)習(xí)之事件模塊Events的使用示例
Nodejs中不存在瀏覽器中冒泡,捕獲這些行為,Nodejs中實現(xiàn)了events這個模塊,Nodejs中大多數(shù)模塊都集成了這個模塊,所以events是Nodejs中最重要的一個模塊。這篇文章主要給大家介紹了關(guān)于node.js學(xué)習(xí)教程之事件模塊Events的相關(guān)資料,需要的朋友可以參考下。2017-09-09Nodejs回調(diào)加超時限制兩種實現(xiàn)方法
這篇文章主要介紹了Nodejs回調(diào)加超時限制兩種實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-06-06nodejs中轉(zhuǎn)換URL字符串與查詢字符串詳解
這篇文章主要介紹了nodejs中轉(zhuǎn)換URL字符串與查詢字符串詳解,需要的朋友可以參考下2014-11-11