文章目录
- 1.ajax/fetch/axios：xhr对象，$.，浏览器输入框加载脚本
- 2.json：new ObjectMapper()
- 3 ajax和json综合：ajax_json_union.html
- 4.案例_校验用户名是否可用：this.value
- 5.案例_自动提示：$(result).each
- 6.跨域请求CORS：接口是在一台服务器或一个端口上，前端的页面服务在另一个服务器或端口上，从前端获取接口里数据时会存在跨域问题
- 7.swagger：用来规范前端和后端统一接口管理
- 8.Websocket保证前端实时性：socket通常指tcp的socket，上来建立双向连接，有通道随意先后发送
- 9.DNS原理与域名的配置：域名作用是方便记忆，dns作用是将域名解析成ip
1.ajax/fetch/axios：xhr对象，$.，浏览器输入框加载脚本
同步加载：1.当前页面直接跳转到另一个页面（覆盖），url发生变化。2.直接新开一个页面，url发生变化。
同步注册：所有信息填完了，点提交等待服务器响应是同步请求（有顺序，等服务器响应结果，不是同步比异步差，之前写的都是同步请求，一个一个发，B覆盖A页面。前端没有线程，下面线程是比喻）。
如上四个箭头就是四次变化。要实现异步请求，必须借助ajax，不然都是同步请求。ajax（Asychronous异步 Javascript And XML）应用：1.搜索内容自动补全，2.注册页面自动检测用户名是否存在。
//01_js中的ajax请求.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function method01() {
//1.创建一个xhr对象(浏览器内核/引擎支持)
var xhr = new XMLHttpRequest();
//2.设置一个监听事件 //5个状态4次改变, 当请求状态改变（点击前端发请求按钮）的时候被触发
xhr.onreadystatechange = function (ev) {
// console.log(xhr.readyState) //1 2 3 4
if(xhr.readyState == 4){ // 前端可以拿到服务器响应后的数据，只4对于我们才有意义
if(xhr.status == 200){
alert(xhr.responseText) //响应成功，拿到后台发来的“hello boy”
}else{
alert("响应失败了~~")
}
}
}
//3.设置请求数据 ，如上的2相当于最后一步
/* method：请求的类型；GET 或 POST //GET请求发送参数拼接在url中如下
url：文件在服务器上的位置
async：true（异步）或 false（同步），一般默认true */
xhr.open("get","/AjaxServlet?name=hehe",true)
//4.发送请求
xhr.send() //将请求发送到服务器。send里参数string：仅用于POST请求，用来放请求体 ，Get参数放在上行url中。
}
</script>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<script>
function method02() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (ev) {
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText)
}
}
xhr.open("post","/AjaxServlet",true)
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//一般编码解码由浏览器完成，但ajax的post请求url编码要上行手动设置。
xhr.send("name=haha")
}
</script>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="js中的ajax(get)请求" onclick="method01()"> <br> <br>
<input type="button" value="js中的ajax(post)请求" onclick="method02()"> <br> <br>
</body>
</html>
post请求参数(“name=haha”)需要url编码才能传到服务器。
//02_jquery中的ajax请求.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
GET请求：$.get(url, [data], [callback], [type]) // []表示可有可无
1. url : 请求地址
2. data : 请求参数 (text,json)
3. callback : 响应成功的回调
4. type : 响应数据的类型(text 默认值,json)
*/
function method01() { //name= 可以用?拼在前面/AjaxServlet的后面 //$是全局对象
$.get("/AjaxServlet","name=xixi",function (result) {
alert(result) //result是服务器传来的"hello boy"
},"text")
}
function method02() { //不可拼在/AjaxServlet后 //不用考虑url编码和post请求参数放哪里问题
$.post("/AjaxServlet","name=huhu",function (result) {
alert(result)
},"text")
}
function method03() {
/*
AJAX完整请求: $.ajax([settings]) 考虑请求失败的情况用完整请求，上面两个方法没有失败
上行settings = object如下
{
n1 : v1,
n2 : v2...
}
*/
$.ajax({
url:"/AjaxServlet",
async:true,
data:"name=tom",
type:"GET", // 请求方式
dataType:"text", // 响应数据的类型
success:function(data){ // 成功的回调
alert(data);
},
error:function(){ // 失败的回调
alert("数据没有成功返回!")
}
});
}
function method04() {
$.post({
url:"/AjaxServlet",
async:true,
data:"name=tom",
dataType:"text", // 响应数据的类型
success:function(data){ // 成功的回调
alert(data);
},
error:function(){ // 失败的回调
alert("数据没有成功返回!")
}
});
}
</script>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="jquery中的ajax(get)请求" onclick="method01()"> <br> <br>
<input type="button" value="jquery中的ajax(post)请求" onclick="method02()"> <br> <br>
<input type="button" value="jquery中的ajax完整请求" onclick="method03()"> <br> <br>
<input type="button" value="jquery3.0中的ajax签名方式请求" onclick="method04()"> <br> <br>
</body>
</html>
package com.itheima01.ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet { //服务端
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
System.out.println(name);
System.out.println("服务器被访问了!");
response.getWriter().print("hello boy");
}
}
如下jquary里内置了ajax请求函数即$ajax，现在浏览器流行的不是ajax了，毕竟jquary出现很多年了，现在用的是fetch和axios，这两者用法很像。
浏览器输入框输入：data:text/html,<h1>hello<h1>，页面自动显示hello。data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>，F12 Network中刷新页面显示如下，这时就可在console中使用jquery了。
监听99号端口的小程序，直接双击打开：链接：https://pan.baidu.com/s/1nHhdf7Qerq3bEkOfXr8FXw 提取码：eipc。
如上在console中回车发送后，如下Network中会多一条localhost请求。
1.1 fetch&axios：fetch大部分浏览器都自带了，除了ie
2.json：new ObjectMapper()
JSON：JavaScript对象简单表示法（JavaScript Object Notation），与js对象区别是JSON只有属性没有方法，比XML小快（因为json不需要标签）。中括号：一个表即一个数组。大括号：一行记录即一个对象。
如下右边java中list集合，前端看不懂无法解析，变成xml后，前端可以解析。任意数组皆为json，上面为混合模式。
2.1 json在前端和后端中表达：json在js中的表达.html（前端）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var jsonObj = {"name" : "张三" , "age" : 18 , "married" : true} //name必须string格式，value无所谓
var jsonObj2 = {"name" : "李四" , "age" : 19 , "married" : false}
console.log(jsonObj.name + "," + jsonObj.age + "," + jsonObj.married) //对象.属性名
var jsonArray = ["哈哈", 1 , true] //也是json对象
console.log(jsonArray[0])
var jsonArray2 = [jsonObj,jsonObj2] //[0,1]
console.log(jsonArray2[1].name)
//jsonComplex.list指的是jsonArray2数组，0索引位是jsonObj
var jsonComplex = {"list" : jsonArray2, "count" : 2}
console.log(jsonComplex.list[0].married) // jsonObj.married
</script>
</head>
<body>
</body>
</html>
//JsonDemo.java（后端）
package com.itheima02.json;
import org.junit.Test;
import java.util.ArrayList;
/*
* Json在java中就是普通string （java不识别json,xml,sql,正则表达式，都认为是字符串）
* Json Java
* 1. 对象 : javaBean
* 2. 数组 : List
* 3. 混合 : Map<Key, List>
*/
public class JsonDemo { //Java数据（javaBean）变成 Json
@Test
public void method01(){
Friend f = new Friend("张三", 18, true);
//System.out.println(f.toString()); //.toString()可以不写，默认调用.toString() //Friend{name='张三'，age=18，..}
System.out.println(f.toJson()); // {"name":"张三"，"age":18，"married":true}
}
@Test
public void method02(){
ArrayList<Friend> list = new ArrayList<>();
Friend f1 = new Friend("张三", 18, true);
Friend f2 = new Friend("李四", 19, false);
list.add(f1);
list.add(f2);
System.out.println(list); //打印如下，默认调用.toString()
//[Friend{name='张三', age=18, married=true}, Friend{name='李四', age=19, married=false}]
StringBuilder sb = new StringBuilder(); //如下将上面list转化为json的数组
sb.append("[");
for (int i = 0; i < list.size(); i++) { //i最多=2个对象
String s = list.get(i).toJson();
if(i == list.size() - 1){ //这行意思为最后一个
sb.append(s); //不加逗号
}else{
sb.append(s + ","); //中间加一个逗号
}
}
sb.append("]");
System.out.println(sb.toString());
}
}
package com.itheima02.json;
public class Friend {
private String name;
private Integer age;
private Boolean married;
public Friend() {
}
public Friend(String name, Integer age, Boolean married) {
this.name = name;
this.age = age;
this.married = married;
}
@Override
public String toString() {
return "Friend{" +
"name='" + name + '\'' +
", age=" + age +
", married=" + married +
'}';
}
public String toJson() {
return "{\"name\" : \""+name+"\",\"age\":"+age+",\"married\":"+married+"}";
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Boolean getMarried() {
return married;
}
public void setMarried(Boolean married) {
this.married = married;
}
}
2.2 jar包：如上手动转换麻烦，如下用jar包将java对象或集合转为json格式字符串
如下右击add as library。
package com.itheima02.json;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
public class JsonDemo02 {
@Test
public void method01() throws JsonProcessingException {
Friend f = new Friend("张三", 18, true);
// System.out.println(f.toJson()); // 没有写toJson
ObjectMapper om = new ObjectMapper(); //1. 创建对象映射器
String json = om.writeValueAsString(f); //2. 调用writeValueAsString (java对象 -> json格式字符串)
System.out.println(json); //{"name":"张三"，"age":18，"married":true}
}
@Test
public void method02() throws JsonProcessingException {
ArrayList<Friend> list = new ArrayList<>();
Friend f1 = new Friend("张三", 18, true);
Friend f2 = new Friend("李四", 19, false);
list.add(f1);
list.add(f2);
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(list);
System.out.println(json); //两个如上
}
@Test
public void method03() throws JsonProcessingException {
ArrayList<Friend> list = new ArrayList<>();
Friend f1 = new Friend("张三", 18, true);
Friend f2 = new Friend("李四", 19, false);
list.add(f1);
list.add(f2);
HashMap<String, Object> map = new HashMap<>(); //json的name必须是string
map.put("list",list);
map.put("count",2);
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(map);
System.out.println(json);
}
}
method03如下：count和list为name。
3 ajax和json综合：ajax_json_union.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
function method01() {
/*
* url : 请求地址
* data : 请求参数 (text , json)
* callback : 响应成功的回调函数
* type : 响应数据的类型 (text , json)
* 1. text : 响应回来的数据变成string
* 2. json : 响应回来的数据变成json(Object)
*/
// var param = "name=admin&pwd=123" // text类型的参数
var param = {"name" : "admin" , "pwd" : "123"} //json类型的参数
$.get("/UnionServlet",param , function (result) {
console.log(typeof result)
console.log(result)
for (var i = 0; i < result.length; i ++) { //前端解析json格式的数据
console.log(result[i].name)
}
},"json")
}
</script>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<input type="button" value="发送一个异步请求" onclick="method01()">
</body>
</html>
如上把$.get中json换成text，如下的object就是string。
package com.itheima03.union;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima02.json.Friend;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
@WebServlet(urlPatterns = "/UnionServlet")
public class UnionServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name"); //后台解析json格式的数据
String pwd = request.getParameter("pwd");
System.out.println(name + "," + pwd);
ArrayList<Friend> list = new ArrayList<>();
list.add(new Friend("瘪三",18,true));
list.add(new Friend("瘪四",19,false));
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(list);
response.setContentType("text/html;charset=utf-8"); //响应体中文乱码问题
response.getWriter().print(json);
}
}
如下是main方法入口，换成猫（web工程的入口在猫里）再点乌龟加载servlet。
4.案例_校验用户名是否可用：this.value
//05_校验用户名是否可用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
异步请求:
1. 事件: 鼠标离开输入框时候触发(失去焦点) onblur
2. 逻辑:
1. 发起异步请求 : 局部刷新页面
2. 请求地址 : /CheckServlet
3. 请求参数 : name = ?
4. 回调(接收响应) :
true : 提示可以注册
false : 不可以注册
3. 后台：
sql : select * from table where name = ?;
查询数据库,查得到, 返回false（告诉前端你不可以注册了） , 查不到, 返回true
-->
<script src="js/jquery-3.3.1.js"></script>
<script>
function method01(value) {
// console.log(value)
$.get("/CheckServlet",{"name" : value},function (result) {
if(result == "true"){ //result为后台发来response.getWriter().print里内容
$("#myspan").text("恭喜你,用户名可用")
$("#myspan").css("color","green")
}else{
$("#myspan").text("不好意思,此用户名已被使用~~")
$("#myspan").css("color","red")
}
},"text")
}
</script>
</head>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!--this.value指如下当前输入框输入的内容，当鼠标离开即onblur时获取-->
<input type="text" placeholder="请输入要注册用户名" onblur="method01(this.value)">
<span id="myspan"></span>
<br>
<input type="text" placeholder="请输入要注册的密码"> <br>
</body>
</html>
package com.itheima04.check;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(urlPatterns = "/CheckServlet")
public class CheckServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
if("jack".equalsIgnoreCase(name)){ //假设数据库里就一个jack
response.getWriter().print("false"); //不要写成println，本来是换行，但在前端中体现是多一个空格
}else{
response.getWriter().print("true");
}
}
}
5.案例_自动提示：$(result).each
//search-page.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Insert title here</title>
<style type="text/css">
.content{
width:643px;
margin:200px auto;
text-align: center;
}
input[type='text']{
width:530px;
height:40px;
font-size: 14px;
}
input[type='button']{
width:100px;
height:46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}
.show{
position: absolute;
width: 535px;
height:100px;
border: 1px solid #999;
border-top: 0;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/*
点击onclick: 按下onkeydown + 抬起onkeyup //文本框内容输入变化onchange不行
* 1. 事件 : onkeyup (键盘抬起)
* 2. 逻辑:
* 异步请求
* 请求地址: /AutoServlet
* 请求参数: value = x 文本框输入的内容
* 回调(响应):
* 3. 服务器
* sql : select * from table where name like ? limit 4; 下拉框显示4个
* 1. 查询数据库 : ? = "value%" 返回list 再变成json数组 再遍历
*/
function method01(value) {
// console.log(value)
if(!value){ // value是空的，到服务器就剩下%符号，变全部查询，所以在这阻断
$(".show").css("display","none") // if(!value)为true
return; // 不往后执行
}
$.get("/AutoServlet",{"value" : value},function (result) {
// console.log(result)
var content = ""
$(result).each(function (index,element) { //jquary的遍历
// console.log(index + "," + element)
content += element.name + "<br>" //不写<br>，就是一行，拼接
})
$(".show").css("display","block") //display由隐藏改回块级元素
$(".show").html(content) //.html自动识别换行<br>标签
},"json")
}
function method02() {
alert("xx")
}
</script>
</head>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div class="content">
<img alt="" src="img/logo.png"><br/><br/>
<input type="text" name="word" onkeyup="method01(this.value)">
<input type="button" value="搜索一下" onclick="method02()">
<div class="show" style="display: none"></div> <!--自动提示下拉框-->
</div>
</body>
</html>
console.log(index + “,” + element) 如下：
package com.itheima05.auto;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet(urlPatterns = "/AutoServlet")
public class AutoServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String value = request.getParameter("value");
String sql = "select * from user where name like ? limit 4"; //limit0,4 默认0不写
JdbcTemplate template = JdbcUtil.getTemplate();
String param = value + "%";
List<User> list = template.query(sql,new BeanPropertyRowMapper<>(User.class),param);
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(json);
}
}
System.out.println(json)如下：
package com.itheima05.auto;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import org.springframework.jdbc.core.JdbcTemplate;
public class JdbcUtil {
private static ComboPooledDataSource ds = new ComboPooledDataSource();
public static JdbcTemplate getTemplate(){
// JdbcTemplate template = new JdbcTemplate(ds);
// return template;
return new JdbcTemplate(ds);
}
}
package com.itheima05.auto;
public class User {
private Integer id;
private String name;
private String password;
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' +
", password='" + password + '\'' +
'}';
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
6.跨域请求CORS：接口是在一台服务器或一个端口上，前端的页面服务在另一个服务器或端口上，从前端获取接口里数据时会存在跨域问题
如下会产生跨域问题，浏览器再次访问localhost:90时会出现和上面百度访问淘宝一样的CORS问题。
解决CORS有如下两种方式：1.修改响应头。
2.jsonp：我们通过href或src请求下来的js脚本或css文件或img或视频都不存在跨域问题，只有通过ajax请求下来的数据才有跨域问题。
7.swagger：用来规范前端和后端统一接口管理
rest接口本身就是http的接口，只不过rest接口一般满足一定的规范，这个规范下的http接口就叫rest接口。一般rest接口中http的get方法进行数据的查询，post增，put改，delete删。rest接口文档需郑重去维护，于是出了很多rest接口文档标准，最有名的就是swagger。
swagger官网：https://editor.swagger.io/。在右边界面中可直接调试，也可看接口的url以及作用是什么。但是自己去写左边yml文档（YML文件是以数据为核心的，比传统的xml方式更简洁，可被支持YAML库的不同的编程语言程序导入）生成右边，不好记，推荐用工具：http://studio.restlet.com/。
在restlet官网中新建名为MYAPI接口，如下创建数据类型。
如下增加rest资源就是url请求相关内容。
如下为资源创建get方法。
如下定义返回的行头体。
如上操作会生成yml文档，复制粘贴进如下左边，如下点击后下载下来用idea打开，点击Swagger2SpringBoot.java启动run起来，启动起来并监听了一些路径（有一个/路径）。
如下浏览器输入localhost:8080（服务端）访问/路径，自动转到服务本地启动的一个辅助界面。
如下进行服务端配置，服务端代码的api目录就是controller所在的目录，修改如下重新运行。
点击上面GET里try it out发请求，如下Body有如上设置好的内容了。
8.Websocket保证前端实时性：socket通常指tcp的socket，上来建立双向连接，有通道随意先后发送
http：客户端主动发请求到服务端，服务端处理请求并响应给客户端，前提是客户端先发起请求，服务端才能发起响应，非常依赖客户端的主动性，有请求才有响应。
http 为短连接：客户端发送请求都需要服务器端回送响应.请求结束后，主动释放链接，因此为短连接。通常的做法是，不需要任何数据，也要保持每隔一段时间向服务器发送"保持连接"的请求。这样可以保证客户端在服务器端是"上线"状态。
Socket：TCP 三次握手：握手过程中并不传输数据，在握手后服务器与客户端才开始传输数据，理想状态下，TCP 连接一旦建立，在通讯双方中的任何一方主动断开连接之前 TCP 连接会一直保持下去。
对 TCP/IP 协议的封装，Socket 只是个接口不是协议，通过 Socket 我们才能使用 TCP/IP 协议，创建 Socket 连接的时候，可以指定传输层协议，可以是 TCP 或者 UDP。
我们大多数用http方式，有时想用socket方式，所以html5后websocket应运而生。如下第一行连接，第二行注册消息事件。websocket应用场景：服务端的一些状态变更需立即通知到客户端实时性，原来去实现实时性的方式是客户端轮询（每秒钟或几秒钟请求一次服务端看数据有没有变化，数据没变化不返回东西，数据发生变化，服务端会返回数据给客户端）。但有了websocket，服务端可主动通知客户端，这时候不再需要这种轮询，因为轮询每秒请求的话会消耗带宽，大量运用在网页聊天室，股票等状态变更频繁场景。
9.DNS原理与域名的配置：域名作用是方便记忆，dns作用是将域名解析成ip
如下根dns服务器全球只有13个，根dns服务器可能也不知道baidu.com这域名对应的ip，但它一定知道 这个域名对应的ip，哪个dns服务器知道。
如下URL：https://www.baidu.com/..请求参数。CAA：证书机构相关配置。TXT：特殊场景下用，如在某个服务下进行域名配置，但这服务要先确认你是否拥有这域名（就会告诉你一个文本，你在域名控制台下配置域名和这个文本的映射并为TXT类型。之后这个服务会到这个域下进行验证，验证刚好得到的文本就是自己提供的文本的话确定了你确实是这域名的拥有者）。
如果你的服务机器是在国内的话，那最好在国内的云服务商购买域名并要备案。国外购买不需要备案，购买完后需要自己配置。域名申请和购买：https://www.namecheap.com/，如下是已经购买了。
如下点击Advanced DNS进行手动配置，点击后如下所示：第二列Host指域名前缀，@符号指没有前缀，TTL刷新时间即生效时间。Host列和Value列效果相同。
1.如下都跳转到同一个页面。
2.如下CName，跳转到同上页面。
3.如下URL，跳转到百度。
