基于Node.js和Cocos Creator的开发【十，实现W
2019-10-21 本文已影响0人
Woodlouse
实现web端
一，前言
现在我们完成了在Cocos Creator中的用户注册，登录的功能，在实现通信时我们需要至少有两个用户登录进系统，才可以实现相互之间的通信，下面我们实现一个web的登录简易页面。
二，web的端的实现
2.1 登录功能的实现
新建Server/test/index.html**文件，输入以下内容
<html>
<title>Web客户端</title>
<!-- 输入用户名 密码的登录 -->
<form>
userID:
<input type="text" name="userID" id="userVal">
<br />
密码:
<input type="password" name="password" id="passwordVal">
<br />
<input type="button" id="button1" onclick="toLogin()" value="login" />
</form>
</html>
这样我们就实现了一个包含输入用户名和输入密码两个输入框的页面，toLogin函数如下：
var userInfo = {}; // 保存用户信息
function toLogin() {
var val = document.getElementById('userVal').value;
var pwd = document.getElementById('passwordVal').value;
console.log('submit come in ..');
userInfo.name = val;
userInfo.pwd = pwd;
sendLogin();
}
function sendLogin() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8181/login/?userName=' +userInfo.name + '&passWord=' + userInfo.pwd, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
if (data['error'] != 0) {
alert('Login error');
return;
}
userInfo = data.data;
alert('登录成功：' + JSON.stringify(userInfo));
}
}
}
xhr.send();
}
启动服务端，打开index页面，输入正确的用户名和密码后，点击登录即可看到服务端返回的登录信息；
2.2 实现WebScoket的通信
在 index.html中加入信息发送框：
<!-- 发送信息框 -->
<form>
输入内容：
<br />
<input type="text" name="inputArea" id="inputArea">
<br />
<input type="button" id="buttonSend" onclick="sendMsg()" value="buttonSend" />
</form>
在登录成功后建立WebSocket连接：
function openWs() {
ws = new WebSocket('ws://127.0.0.1:8183/');
ws.onopen = function(info) {
console.log('connect open info = ' + JSON.stringify(info));
sendEnter();
}
ws.onmessage = function(info) {
console.log('onmessage info = ' + info.data);
}
ws.onclose = function(info) {
console.log('onclose come in info = ' + JSON.stringify(info));
}
ws.onerror = function(info) {
console.log('onerror info = ' + JSON.stringify(info));
}
}
function sendEnter() {
var data = {
'cmd' : 'enter',
'data' : {
'userId' : userInfo.id,
'token' : userInfo.token
}
};
ws.send(JSON.stringify(data));
}
sendMsg函数的实现：
function sendMsg() {
var msg = document.getElementById('inputArea').value;
alert('要发送的消息:' + msg);
}
解决跨域问题
在通过web端向后端发送协议时会发生跨域问题，需要修改httpServer.js文件中添加：
res.setHeader("Access-Control-Allow-Origin", "*");
目前sendMsg函数还没有实现和后端的通信，今天做这些内容是为实现用户通信做好准备。
上一篇 建立socet测试脚本
