WebSocket-nodejs實現

1、環境配置

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

  2.安裝完成後打開cmd命令,執行node --version,看看是否安裝成功,若是提示沒有此命令,去配置下環境變量,正常狀況下安裝後自動設置環境變量html

2、配置nodejs模塊

  1.安裝express模塊java

    模塊介紹:Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你建立各類 Web 應用,和豐富的 HTTP 工具。node

            安裝方式:在項目路徑下執行npm install expressjquery

3、HelloWord

  1.建立一個目錄,做爲項目目錄web

       2.建立一個demo.js   express

var express = require('express'),//讓其變爲web模式
    app = express(),
	server = require('http').createServer(app);//引入http訪問模式並綁定服務
	server.listen(8000);//添加訪問端口
	app.get('/', function (req, res) {
	  res.send('Hello World');//當訪問Ip:8000時,頁面便可顯示
})

  

  3.在項目目錄下按住shift右鍵,選擇‘在此處打開命令窗口’執行node demo.js  未報錯即啓動成功npm

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

4、訪問頁面

  1.在項目路徑建立頁面文件夾pages,並建立html頁面a.html服務器

        2.在剛剛建立的demo.js中添加以下代碼

var express = require('express'),//讓其變爲web模式

    app = express(),

         server = require('http').createServer(app);//引入http訪問模式並綁定服務

         server.listen(8000);//添加訪問端口

         app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下建立a.html頁面,可以使用ip:8000/a.html訪問到

         //app.use('/', express.static(__dirname + '/pages1'));//可配置多路徑,但默認會自上往下查找,找到後即返回,終止查找

         app.get('/', function (req, res) {

           res.send('Hello World');//當訪問Ip:8000時,頁面便可顯示

 })

  3.重啓後訪問ip:port/a.html便可訪問到該頁面

5、引用其餘js

  1.在項目根目錄建立include.js,內容以下

var hello = {
    sayHello:function(name){	
			  return 'hello,'+name+',this is include.js';
    }

}
module.exports=hello;

  2.在demo.js中添加

var express = require('express'),//讓其變爲web模式
    app = express(),
	include =require('./include.js'),//進入js
	server = require('http').createServer(app);//引入http訪問模式並綁定服務
	server.listen(8000);//添加訪問端口
	app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下建立a.html頁面,可以使用ip:8000/a.html訪問到.  "__dirname"爲項目路徑默認變量
		app.get('/', function (req, res) {
	  res.send(include.sayHello("demo"));
	})

  3.請求ip:port便可看到內容

6、解析請求參數

  1.在demo.js中添加後請求連接http://ip:port/?p1=p&p2=2

  

var express = require('express'),//讓其變爲web模式
    app = express(),
	url = require('url'),
	server = require('http').createServer(app);//引入http訪問模式並綁定服務
	server.listen(8000);//添加訪問端口
	app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下建立a.html頁面,可以使用ip:8000/a.html訪問到.  "__dirname"爲項目路徑默認變量
	app.get('/', function (req, res) {

	  // 解析 url 參數
    var params = url.parse(req.url, true).query;
    res.write("網站名:" + params.p2);
    res.write("\n");
    res.write("網站 URL:" + params.p1);
    res.end();
	})

  

7、發送http請求

  1.post

  在demo.js中添加以下內容後訪問http://mykl:8000/? parameter=2

  

var express = require('express'),//讓其變爲web模式
    app = express(),
	url = require('url'),
    util = require('util'),
	include =require('./include.js'),
	server = require('http').createServer(app);//引入http訪問模式並綁定服務
	server.listen(8000);//添加訪問端口
	app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下建立a.html頁面,可以使用ip:8000/a.html訪問到.  "__dirname"爲項目路徑默認變量
	//app.use('/', express.static(__dirname + '/pages1'));//可配置多路徑,但默認會自上往下查找,找到後即返回,終止查找
	app.get('/', function (req, res) {
		// 解析 url 參數
		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);//得到請求的參數
      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){//發送請求
          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中添加以下內容後訪問http://mykl:8000/?parameter=2

var express = require('express'),//讓其變爲web模式
    app = express(),
	http=require('http'),
	url = require('url'),
	include =require('./include.js'),
	server = http.createServer(app);//引入http訪問模式並綁定服務
	server.listen(8000);//添加訪問端口
	app.use('/', express.static(__dirname + '/pages'));//綁定頁面路徑,在pages下建立a.html頁面,可以使用ip:8000/a.html訪問到.  "__dirname"爲項目路徑默認變量
	//app.use('/', express.static(__dirname + '/pages1'));//可配置多路徑,但默認會自上往下查找,找到後即返回,終止查找
	app.get('/', function (req, res) {
		// 解析 url 參數
		var params = url.parse(req.url, true).query;

		//get 請求外網  
		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();
			});  
		});
		
	})

  

8、socket

 1.安裝socket模塊  

  npm install socket.io

 2.進入上一步安裝的模塊路徑,找到socket.io.js

    3.在page下建立一個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="發送" />
	<br/>
</body>
<script src="socket.io.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
	var socket=io.connect();//與服務器進行鏈接
	$('#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>
相關文章
相關標籤/搜索