websocket 初探·练习笔记

7 篇文章 0 订阅
1 篇文章 0 订阅
websocket 初探
  • websocket的数据交互
    1、性能高
    2、双向 — 数据的实时性
    3、HTML5 IE9+
    4、socket.io
    跨域

  • HTTP协议 — 一般文本数据流

  • socket.io:
    1、兼容性?可以用来做兼容
    2、二进制数据流

  • socket.io 应用场景:
    1、聊天室
    2、视频点播

  • ajax 的跨域、以及 jsonp 的跨域性?

  • 使用工具

后台- node

  • 原生的nodeJS使用JavaScript写后台
    1、性能高 — 相同功能要比Java高 86
    2、和前台配合更好,适合前端人员入门

  • 比较
    1、Java适合百人的大型项目,几十年的发展有很多的支撑行的东西,框架较多。 ssh/ssm
    2、 nodeJS 小型项目,工具。 中间层

如何使用nodeJS做一个后台项目:

协议:

const http = require('http') // 自带HTTP协议模块

let server = http.createServer()

server.listen() // 等待(监听)客户端的连接
server.listen(8080)
console.log('监听成功')

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6UeGstFp-1571971028218)(https://note.youdao.com/yws/public/resource/85883b68908f40f60f5053bc966b5a73/xmlnote/WEBRESOURCEc0b46cae31bc45717c38b09e68fe049c/420 ‘结果’)]

  • listen 等待客户端的连接
    1、端口—数字:区分不同的服务
    2、Linux — 1024+

  • 每种服务都有默认端口:
    1、web ----- 88
    2、ssh ------ 22
    3、ftp ------- 21
    4、mysql — 3306

  • 读取文件

const fs = require('fs')
fs.readFile('data/1.txt', (err, data) => {
  if (!err) {
    console.log('读取成功')
    // console.log(data) // <Buffer 5b 31 2c 32 2c 33 2c 34 5d>
    console.log(data.toString()) // [1,2,3,4]
  } else {
    console.log('读取失败')
  }
})
  • Buffer 缓冲区 — 说白了就是一个二进制大数组, 作用就是保护获取的信息 以 二进制的形式保存,不以字符串生成。

  • 写文件

// 写文件
fs.writeFile('data/1.txt', '随便写入文字信息', (err) => { 
  if (!err) {
    console.log('写入成功')
  } else { 
    console.log('写入失败')
  }
})
  • HTTP模块结合fs模块
// 读取文件
fs.readFile(path, (err,data)=>{ })
// 写文件
fs.writeFile(path, (err,data)=>{ })
// 引入 http 模块
const http = require('http')
const fs = require('fs')

// 创建简易服务器
http.createServer((req, res) => {
  // 读取文件
  fs.readFile(`www${req.url}`, (err, data) => { 
    if (!err) {
      res.write(data) 
    } else {
      console.log('读取失败')
      res.write('404')
    }
    res.end()
  })
}).listen(3000)  // 监听端口,等待客户端连接

//res.end()这里要记得end要在write之后运行,否则报错

- websocket :
初步了解 websocket
const http = require('http')
const io = require('socket.io')

// 搭建 http 服务器环境
const httpServer = http.createServer()
httpServer.listen(3000)

// 搭建 websock 服务
const wsServer = io.listen(httpServer)
wsServer.on('connection', sock => { 
  // sock.emit
  sock.on('a', (...args) => { 
    console.log(...args)
  })
})
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://localhost:3000/socket.io/socket.io.js" charset="utf-8"></script>
  <script>
    let sock = io.connect('ws://localhost:3000/')
    sock.emit('a', 1,2,3,4)
  </script>
</head>
<body>

</body>
</html>

步骤:
1.node server.js 打开服务文件
2.打开静态 demo.html 文件
打印结果:
结果

里面涉及到的跨域:
file:///Users/a123/Documents/websocket/ws/ —> http://localhost:3000/


数据库:

1.关系型 — MySQL、oracle
优点:强大 缺点:性能低
2.文件型 — SQLite
优点:简单 缺点:支撑不了庞大应用,无法存储大量数据
3.文档型 — MongoDB
优点:直接存储对象本身 缺点:不够严谨,性能低
4.空间型 — 坐标、位置

  • MySQL:
// ndoe 项目前的准备:
npm i mysql -D
const mysql = require('mysql')

// 连接数据库
let db = mysql.createConnection({
  host: 'localhost',
  port: '3306',
  user: 'root',
  password: 'root',
  database: 'websock'
})
db.query("select * from user_table", (err, data) => { 
  if (err) {
    // console.log('connect is failure')
    console.log(err)
  } else { 
    // console.log(data)
    console.log(JSON.stringify(data))
  }
})
数据库语言: SQL

四大查询语句(CRUD) — 增删改查

<!-- 增  INSERT INTO 表 (字段列表) VALUES(值) -->
INSERT INTO user_table (id,name,skills) VALUES('4','诸葛亮','聚气波')
<!-- 删 -->
DELETE FROM user_table WHERE id=6
<!-- 改 -->
UPDATE user_table SET name='孙悟空',skills='筋斗云' WHERE id=2
<!-- 查 -->
SELECT id,name,skills FROM user_table // 整表查
SELECT id,name,skills FROM user_table where id=2 // 按条件查询

数据库列表


##### 接口的写法
  • 接口:
    1.用户注册:
    2.用户登录:
形式:/register?user=xxx&pass=xxx
{"code":0, "msg":"信息"}
  • 请求形式:
    • 第一种 — 请求文件
      /1.html
      /1.js
    • 第二种 — 请求接口
      /reg?xxx
      /login?xxx

  • 正常获取 URL 地址信息
 // http://127.0.0.1:5500/ws/ceshi.html
    let [host, path, ...args] = window.location.href.split(':')
    let arr = [host, path, ...args]
    console.log(arr)   // ["http", "//127.0.0.1", "5500/ws/ceshi.html"]
  • node获取URL
 // node_url 语法
const url = require('url')
let href = url.parse('https://www.cnblogs.com:8080/reg?name=jace&pass=1234',true)
console.log(href)

url.pase( )参数,不带true
结果

url.parse() 参数,带true —> json 数据格式
结果

简单注册/登录接口的实现:

脚本文件

// 引入 必要 模块
const http = require('http')
const fs = require('fs')
const url = require('url')
const mysql = require('mysql')
const regs = require('./libs/regs')

// 数据库连接池
let db = mysql.createPool({
  host: 'localhost',
  port: '3306',
  user: 'root',
  password: 'root',
  database: 'websock'
})

// 建立服务器连接
let httpServer = http.createServer((req, res) => {

  // 获取地址信息
  let { pathname, query } = url.parse(req.url, true)
  // console.log(url.parse(req.url, true))

  // 注册接口
  if (pathname == '/reg') {
    let { user, pass } = query
    // console.log(query)
    // 判断数据库信息
    if (!regs.username.test(user)) {
      res.write(JSON.stringify({ code: 1, msg: '用户名不符合规范' }));
      res.end();
    } else if (!regs.password.test(pass)) {
      res.write(JSON.stringify({ code: 1, msg: '密码不符合规范' }));
      res.end();
    } else {
      db.query(`SELECT * FROM user_infos WHERE username='${user}'`, (err, data) => {
        console.log(data)
        if (err) {
          res.write(JSON.stringify({ code: 1, msg: '数据库获取信息失败' }))
          res.end()
        } else if (data.length > 0) {
          res.write(JSON.stringify({ code: 1, msg: '用户名已存在,请重新输入' }))
          res.end()
        } else {
          db.query(`INSERT INTO user_infos (username,password,status) VALUES('${user}','${pass}','0')`, err => {
            if (err) {
              res.write(JSON.stringify({ code: 1, msg: '数据库添加信息出现异常' }))
              res.end()
            } else {
              res.write(JSON.stringify({ code: 0, msg: '注册成功' }))
              res.end()
            }
          })
        }
      })
    }
    // 登录接口
  } else if (pathname == '/login') {
    let { user, pass } = query
    db.query(`SELECT * FROM user_infos WHERE username='${user}'`, (err, data) => {
      console.log(data)
      if (err) {
        res.write(JSON.stringify({ code: 1, msg: '数据库查询信息失败' }));
        res.end();
      } else if (data.length == 0) {
        res.write(JSON.stringify({ code: 1, msg: '此用户不存在' }));
        res.end();
      } else if (data[0].password != pass) {
        res.write(JSON.stringify({ code: 1, msg: '密码或用户名错误' }));
        res.end();
      } else { 
        // 设置登录状态
        db.query(`UPDATE user_infos SET status=1 WHERE ID='${data.id}'`, err => {
          if (err) {
            res.write(JSON.stringify({ code: 1, msg: '数据库设置状态失败' }))
            res.end()
          } else {
            res.write(JSON.stringify({ code: 0, msg: '登录成功' }))
            res.end()
          }
        })
      }
    })
  } else {
    fs.readFile(`www${pathname}`, (err, data) => {
      if (err) {
        res.write('文件报错')
        res.writeHeader(404)
      } else {
        res.write(data)
      }
      res.end()
    })
  }
})

httpServer.listen(3000)

html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js" charset="utf-8"></script>
    <script>
    $(function (){
      //注册
      $('#btn1').click(function (){
        $.ajax({
          url: '/reg',
          data: {user: $('#user').val(), pass: $('#pass').val()},
          dataType: 'json',
          success(res){
            if(res.code){
              alert('注册失败,'+res.msg);
            }else{
              alert('注册成功');
            }
          },
          error(err){       //通信失败
            alert('注册失败,网络不通');
          }
        });
      });

      //登陆
      $('#btn2').click(function (){
        $.ajax({
          url: '/login',
          data: {user: $('#user').val(), pass: $('#pass').val()},
          dataType: 'json',
          success(res){
            if(res.code){
              alert('登陆失败,'+res.msg);
            }else{
              alert('登陆成功');
            }
          },
          error(err){       //通信失败
            alert('登陆失败,网络不通');
          }
        });
      });
    });
    </script>
  </head>
  <body>
    用户:<input type="text" id="user" /><br>
    密码:<input type="password" id="pass" /><br>
    <input type="button" value="注册" id="btn1">
    <input type="button" value="登陆" id="btn2">
  </body>
</html>

源代码?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值