WebSocket

使用MDN的话来形容：

1. WebSockets 是一种先进的技术。
2. 它可以在用户的浏览器和服务器之间打开交互式通信会话。
3. 使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

Http 和WebSocket的联系和区别

1. http只能客户端主动请求服务端（单向通信），webSocket是服务端可以主动推送信息给客户端（双向通信）
2. http链接是短暂的，请求完成后就会断开，webSocket是持久性的，只需要连接一次在没中断的情况下还能继续进行数据交互（使用websocket可以代替http轮询）
3. http在浏览器中不同源的情况下会出现跨域， websocket没有跨域的情况
4. 同样基于TCP/IP协议的应用层

socket和WebSocket的联系

socket和WebSocket的联系
Socket是传输层接口，WebSocket是应用层协议。
http协议也是基于socket的

使用

websocket MDN文档：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

创建实例

const ws = new WebSocket(“ws://localhost:3000”)

监听事件

1. onopen：监听连接打开的时候会触发事件
2. onmessage：监听服务器返回的消息
3. onclose：监听连接关闭事件
4. onerror：监听连接错误事件

方法

1. close：主动关闭连接
2. send：向服务端发送链接

心跳检测

心跳检测和重连机制
原因：防止连接中断但是没有触发close事件，导致服务器继续推送消息
思路：定时向服务端发送检测信息，服务端接收到检测信息后返回消息，如果在定义的事件内没有返回消息，就断定为断开，进行重新连接

前端代码

<script>
	let isConnect = false;
	let ws;
	const wsurl = "ws://localhost:3000";
	// 创建 websocket 连接
	function createSocket() {
		ws = new WebSocket(wsurl)
		initWebSocketEvent();
		return ws;
	}
	// 初始化监听事件
	function initWebSocketEvent(){
		ws.onopen = event => {
			isConnect = true
			console.log("i am open")
		}
		ws.onmessage = event => {
			console.log("i am message",event.data)
		}
		ws.onclose = event => {
			console.log("i am close")
			isConnect = false
		}
		ws.onerror = event => {
			console.log("i am error")
			isConnect = false
			reconnect()
		}
	}
	// 重连
	function reconnect() {
		if (!isConnect) {
			setTimeout(() => {
				createSocket()
			}, 1000);
		}
	}
	//关闭
	function closeConnect() {
		ws.close();
	}
	//发送消息到服务端
	function sendMsg(msg) {
		if(isConnect){
			ws.send(msg);
		}else{
			console.log("链接已断开")
		}
		
	}
	createSocket()
</script>

nodejs服务代码

npm install ws --save

const WebSockets = require("ws");
const wss = new WebSockets.Server({
    port: 3000
})
wss.on("connection", ws => {
    ws.on("message", message => {
        console.log(message.toString())
        ws.send(message.toString())
        // 发送给指定用户
        // const arr = Array.from(wss.clients)
        // arr[0].send(message.toString())
    })
    ws.send("message")
})

最后

以上就是暴躁鼠标为你收集整理的网络基础 websocketWebSocketHttp 和WebSocket的联系和区别socket和WebSocket的联系使用前端代码的全部内容，希望文章能够帮你解决网络基础 websocketWebSocketHttp 和WebSocket的联系和区别socket和WebSocket的联系使用前端代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。