mini-browser

140 阅读1分钟

1 环境准备

(1)编辑器 vscode
(2)新建一个文件夹browser
(3)初始化 npm init -y
(4)安装typescript ts-node types/node 运行命令:npm i typescript ts-node @types/node -D

2编写http服务代码

node.js 版本 14.x

2.1 创建对应的服务及回调

import {createServer} from 'http' // 1 创建一个http.sever const sever = createServer(( req, res ) => { // 2 设置状态码 res.statusCode = 200 // 3 设置请求头 res.setHeader('Content-Type','text/html') // 4 返回内容 res.end(<h1>hello,world<h1>) }) sever.listen(8080,() => { console.log('sever started,listen: 8080端口') })

2.2 配置启动命令

package.json中配置对应的启动命令 "serve": "ts-node sever.ts"

image.png

2.3 启动服务

命令:npm run sever
启动成功后,浏览器直接访问 http://localhost:8080/

image.png

3 基于TCP协议服务端简单代码

3.1 代码

// 基于tcp 实现服务端代码 import {createServer} from 'net';

const sever = createServer(client => { console.log('address',client.remoteAddress) console.log('port',client.remotePort) client.on('data',data => { // 获取请求的数据 console.log(data.toString()); // 请求之后返回数据 client.write(HTTP/1.1 200 OK \r Content-Type: text/html\r Content-Length: 19 \r\n <h1>I am tcp</h1> ) // 关闭连接 client.end() }) }) sever.listen({ host:'127.0.0.1', port:8080 });

3.2 配置启动命令 "net": "ts-node sever_tcp.ts"

启动效果

image.png

源自:www.bilibili.com/video/BV1EL…