websocket 初探·练习笔记

最新推荐文章于 2023-08-19 10:37:23 发布

辰枫Sir.

最新推荐文章于 2023-08-19 10:37:23 发布

阅读量377

点赞数 1

分类专栏：随笔 JavaScript websocket 文章标签： websocket js nodejs

本文链接：https://blog.csdn.net/qq_43531694/article/details/102738343

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 2 订阅

订阅专栏

随笔

7 篇文章 0 订阅

订阅专栏

websocket

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官方文档中文版
1、原生的 nodejs
2、nodeJS框架

原生的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>

源代码?