js - WebSocket应用小案例

WebSocket 对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。

// 判断浏览器是否支持websocket
if(window.WebSocket){
	console.log("您的浏览器支持WebSocket");
	//创建WebSocket连接
	var ws = new WebSocket("ws://{ip}:{port}");
	
	// 当一个 WebSocket 连接成功时触发。
	ws.onopen = function(){
		console.log("socket连接成功!");
		ws.send("hello");
	}

	// 当通过 WebSocket 收到数据时触发。
	ws.onmessage = function(e){
		console.log(e.data);
		messageHandler(e.data);
	}

	//当一个 WebSocket 连接被关闭时触发。
		ws.onclose = function(e){
		console.log("scoket关闭!");
	}

	// 当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。
		ws.onerror = function(e){
		console.log(error);
	}

	// 对接收到的消息进行处理
	messageHandler(msg){
		// 解析数据
	}
}else{
	console.log("您的浏览器不支持WebSocket");
}

向服务器发送数据:
数据作可以是字符串,Blob,或者ArrayBuffer。

  • 以字符串的形式发送数据
sendMessage(){
	ws.send("这是一个字符串");
}
  • 使用 JSON 发送对象
sendMessage(){
	var object = {
		name: "数据对象",
		type: "发送JSON"
	}
	ws.send(JSON.stringify(object));
}

处理接收到的消息:

  • 接收到的数据是JOSN
messageHandler(msg){
	// 解析JOSN数据
	var obj = JSON.parse(msg);
	// 根据解析到的数据分别调用相应的处理方法
	// ...
}

参考资料:WebSocket接口文档

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页