Web-Socket-Helper
/
qr-login.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		  <script type="text/javascript" src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>


		<style>
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}

			html,
			body {
				height: 100%;
				width: 100%;
			}

			body {
				overflow: hidden;
				text-align: center;
				background: #333;
			}

			#title {
				font-size: 21px;
				color: white;
				position: absolute;
				top: -50px;
				width: 296px;
				left: 0;
			}

			#qrcode {
				position: relative;
				height: 256px;
				width: 256px;
				padding: 20px;
				margin: 12% auto;
				background: #fff;
			}

			.line {
				font-size: 14px;
				color: #fff;
				margin-top: 30px;
			}
		</style>

	</head>
	<body>


		<div id="qrcode">
			<div id="title">系统登陆</div>
		</div>


		<script>
			var helper = {

				service: 'https://api.itool.store/',

				wss: "wss://api.itool.store/v1/.ws",

				projectToken: "6D7-BB91-13901823A235",

				GetClientToken: function() {

					var cache = localStorage.getItem("_client_token");
					if (cache) {
						return cache;
					}
					var value = '_qr_login_' + Math.random().toString(36).substr(2);
					localStorage.setItem("_client_token", value);
					return value;
				}

			};

			function loger(val) {
				$("#qrcode").append("<p class='line'>" + val + "</p>");
			}

			var ajax = {
				post: function(url, data, call) {
					$.ajax({
						url: url,
						type: "post",
						dataType: "json",
						data: JSON.stringify(data),
						headers: {
							'Content-Type': 'application/json'
						},
						success: call
					});
				}
			};

			ajax.post(helper.service + '/.v1/socket/user/.wsbyclient', {
				"uuid": helper.GetClientToken(),
				"projectToken": helper.projectToken,
				"parameter": JSON.stringify({
					type: 'login'
				})
			}, function(e) {
				if (e.code) {

					var ws = new WebSocket(helper.wss);

					// 建立 web socket 连接成功触发事件
					ws.onopen = function() {

						// 使用 send() 方法发送数据
						setTimeout(function() {
							ws.send("ixpe_userlogin:" + e.info);
						}, 800);

						// loger("数据发送中...")
					};

					// 接收服务端数据时触发事件
					ws.onmessage = function(evt) {

						// loger('数据已接收:' + evt.data);

						var received_msg = JSON.parse(evt.data);

						switch (received_msg.type) {
							case 'userlogin':
								if (received_msg.date == '200') {
									// loger("初始化成功:" + received_msg.date);
									jQuery('#qrcode').qrcode(JSON.stringify({
										type: 'qrlogin',
										sesstion: e.date.id
									}));
								} else {
									loger("初始化失败:" + received_msg.date);
								}
								break;

							case 'current':
								try {
									var messageParameter = JSON.parse(received_msg.messageParameter);
									switch (messageParameter.type) {
										case 'login':

											switch (received_msg.message) {
												case 'open':
													loger("手机端已扫描，请选择 '确认' or '取消'");
													break;
												case 'close':
													loger("手机端已选择 '取消'");
													break;
												default:
													console.log(received_msg.message)
													loger("手机端已选择 '确认',用户信息请见 '控制台'Log ");
													break;
											}

											break;
									}

								} catch (e) {
									// TODO handle the exception
								}

								break;


						}
					};

					// 断开 web socket 连接成功触发事件
					ws.onclose = function() {
						loger("连接已关闭...")
					};

				} else {
					console.log(e.info)
				}
			});
		</script>

	</body>
</html>