Nodejs實(shí)現(xiàn)WebSocket代碼實(shí)例

更新時(shí)間：2020年05月19日 15:57:07 作者：RollBack2010

這篇文章主要介紹了Nodejs實(shí)現(xiàn)WebSocket代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

一、環(huán)境配置

　　1.下載安裝nodejs https://nodejs.org/en/download/

　　2.安裝完成后打開cmd命令，執(zhí)行node --version,看看是否安裝成功，如果提示沒有此命令，去配置下環(huán)境變量，正常情況下安裝后自動設(shè)置環(huán)境變量

二、配置nodejs模塊

　　1.安裝express模塊

　　　　模塊介紹：Express 是一個(gè)簡潔而靈活的 node.js Web應(yīng)用框架, 提供了一系列強(qiáng)大特性幫助你創(chuàng)建各種 Web 應(yīng)用，和豐富的 HTTP 工具。

　安裝方式：在項(xiàng)目路徑下執(zhí)行npm install express

三、HelloWord

　　1.創(chuàng)建一個(gè)目錄，作為項(xiàng)目目錄

2.創(chuàng)建一個(gè)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時(shí)，頁面即可顯示
})

　　3.在項(xiàng)目目錄下按住shift右鍵，選擇‘在此處打開命令窗口'執(zhí)行node demo.js 未報(bào)錯(cuò)即啟動成功

4.在瀏覽器訪問ip:port即可輸出

四、訪問頁面

　　1.在項(xiàng)目路徑創(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時(shí)，頁面即可顯示
 })

　　3.重啟后訪問ip:port/a.html即可訪問到該頁面

五、引用其他js

　　1.在項(xiàng)目根目錄創(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'),//進(jìn)入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"為項(xiàng)目路徑默認(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"為項(xiàng)目路徑默認(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"為項(xiàng)目路徑默認(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"為項(xiàng)目路徑默認(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.進(jìn)入上一步安裝的模塊路徑，找到socket.io.js

3.在page下創(chuàng)建一個(gè)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ù)器進(jìn)行連接
  $('#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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: