express和websocket

传说中的神兽-cy

已于 2024-03-20 16:26:51 修改

阅读量268

点赞数

分类专栏： node 文章标签： express websocket javascript

于 2020-10-20 21:01:50 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37179373/article/details/109189439

版权

node 专栏收录该内容

5 篇文章

订阅专栏

安装
```
  cnpm install express --save
```

创建服务器

  var express=require('express');
  var app=express();
  app.listen(8888,function () {
      console.log('运行在8888端口')
  })

路由

参数问题

传统:url.parse(req.url,true);

  http://localhost:8080/test?username=cy&&age=18
  const url=require('url');
  //传统方式
  app.get('/test',(req,res,next)=>{
      const path_url=url.parse(req.url,true);
      var username=req.query.username;
      res.send({
          username:username
      })
  })

resetful api 接口方式

  http://localhost:8080/test/cy/18
  :username若是参数有:
  app.get('/test/:username/:age',(req,res,next)=>{
      var username=req.param('username');
      var age=req.param('age');
      res.send({
          username:username,
          age:age
      })
  })

post

  app.post('/posttest',(req,res,next)=>{
      var username=req.param('username');
      res.send({
          username:username
      })      
  })
  const bodyParser=require('body-parser');
  // 使用body-parser中间件
  app.use(bodyParser.urlencoded({ extended: false }));

  const bodyParser=require('body-parser');
  // 使用body-parser中间件
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  
  router.post('/login', (req, res) => {
      const email = req.body.email;

fs.readFile:异步

  var fs=require('fs');
  fs.readFile('./data/a.txt','utf8',function(err,data){
      if(err) throw err;
      console.log(data);
      fs.readFile('./data/b.txt','utf8',function(err,data){
          if(err) throw err;
          console.log(data);....
      })
  })
  要想保证顺序,必须嵌套:太麻烦:可以用promise

Promise:是js的一个内置的构造函数

  //i promise you 
  //许下一个承偌:相当于创建个实例
  var p1=new Promise(function(resolve,reject){//形参可任意
      fs.readFile('./data/a.txt','utf8',function(err,data){
          
      }
  })

app.all("*",function(req, res, next){ res.header("Access-Control-Allow-Origin", "*"); next(); });

*支持正则匹配，具体看官网
cnpm install --save currently

    "client-install": "npm install --prefix liveable",
    "client": "npm start --prefix liveable",
    "start": "node index.js",
    "index": "nodemon index.js",
    "dev": "concurrently \"nodemon\" \"npm run client\""
	第一行和第二行的liveable是前端项目名


json-server
json-server --watch data.json
http://localhost:3000/jobs/
http://localhost:3000/jobs/1


cnpm install --save mockjs
// 使用 Mock
const Mock = require('mockjs');
let Random = Mock.Random;
Random.name();
Random.county();
let data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|200': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'key|+1': 1,
        'name': '@cname',
        'age|20-50': 50,
        'address': '@county'
    }]
});
data=JSON.stringify(data, null, 4);
data=JSON.parse(data);

- websocket

服务器端-后端

安装express-ws
const app = express();
let ws = require("express-ws");
ws(app);
//websocket长链接
const wss = [];
app.ws("/", (ws, req) => {
  console.log("连接成功！");
  // send给客户端发消息
  // on是监听事件
  // message表示服务端传来的数据
  wss.push(ws);
  ws.on("message", (msg) => {
    console.log(msg);
    // 给所有的客户端广播消息
    // console.log(msg);
    // console.log(wss);
    wss.forEach((e) => {
      e.send(msg);
    });
  });

  // close 事件表示客户端断开连接时执行的回调函数
  ws.on("close", function (e) {
    console.log("close connection");
  });
});

- 前端-多个页面打开，操作一个页面，其他页面也会改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="text" name="msg" id="msg">
<input type="button" value="发送" id="btn">
<ul id="showMsg"></ul>
<script>
    function UrlSearch() {
        var name, value;
        var str = location.href; //取得整个地址栏
        var num = str.indexOf("?")
        str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [,length ]
        var arr = str.split("&"); //各个参数放到数组里
        for (var i = 0; i < arr.length; i++) {
            num = arr[i].indexOf("=");
            if (num > 0) {
                name = arr[i].substring(0, num);
                value = arr[i].substr(num + 1);
                this[name] = value;
            }
        }
    }
    var Request = new UrlSearch(); //实例化
    var ws = new WebSocket("ws://localhost:8888");
    var btn = document.getElementById('btn')
    var inputDom = document.getElementById('msg')
    var ulDom = document.getElementById('showMsg')
    btn.addEventListener('click', function () {
        ws.send(inputDom.value)
        inputDom.value = ''
    })
    ws.onopen = function (evt) {
        console.log("Connection open ...");
        //ws.send("Hello WebSockets!");
    };
    let liHtml = ''
    ws.onmessage = function (evt) {
        console.log(evt.data);
        liHtml += `<li>：${evt.data}</li>`
        ulDom.innerHTML = liHtml
    };
    ws.onclose = function (evt) {
        console.log("Connection closed.");
    };
</script>
</body>
</html>