最近正好学了学原生JS,暑假实习也是利用nodejs做的项目,自己网站最近也升级了,最近也打算写一个游戏服务端,但苦于没找到合适的客户端,会C++首选是UE4,但为什么没有选呢?其一我的笔记本电脑是轻薄本且我的想法并不是大制作,后在github看到一个H5的球球大作战,一个人的那种,所以萌生了用H5做个简易的游戏客户端,学一学websocket
首先确保自己的电脑装了nodejs,websocket就是可以双向通信(客户端和服务端都可以接受数据和发送数据),而不是客户端发送请求,服务端响应,这个on函数可以理解为绑定了一个回调函数。on函数第一个参数就表示他的方法名字了
nodeJS代码如下
const WebSocket = require('ws');
const server = new WebSocket.Server({
port: 8080 });
server.on('connection', function connection(fd, req) {
const ip = req.socket.remoteAddress;
const port = req.socket.remotePort;
const clientName = ip + port;
fd.on('message', function recv(message) {
console.log('recv msg:', message.toString())
// fd.send('received: ' + message + '(From Server)');
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(clientName + " -> " + message);
}
})
});
fd.on('close', function close() {
console.log("连接关闭");
console.log(req.socket.remoteAddress);
});
// ws.on('close',{})
console.log("recv conection")
fd.send('Hello Client');
});
客户端/前端用的是Vue框架和原生JS随便写写的
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
<div>
<textarea rows="15" cols="30" id="importTEXT" disabled="disabled" style="resize:none;">
</textarea>
</div>
<div id="div2">
<textarea rows="5" cols="30" id="sendText" style="resize:none;" @keyup.enter="sendMsg"></textarea>
<button @click="sendMsg">
发送内容
</button>
</div>
<script>
function getId(idName) {
return document.getElementById(idName)
}
const url = 'ws://127.0.0.1:8080'
const socket = new WebSocket(url);
let myText = getId('importTEXT')
// Connection opened
socket.addEventListener('open', function(event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function(event) {
console.log('Message from server ', event.data);
myText.value += event.data + '\r\n'
});
let div1 = new Vue({
el: '#div2',
methods: {
sendMsg: function() {
let stext = getId('sendText')
console.log(stext)
let str = stext.value;
stext.value = ""
console.log(str);
socket.send(str);
}
}
});
</script>
</body>
</html>