Starlight-0208/WebSocket-Server-2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phased Submit

Browse Source
This commit is contained in:
starlight 2022-12-05 23:11:03 +08:00
parent 5b6c5a85a3
commit cd67f4f863
5 changed files with 102 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
DevelopNote.md
View File

@ -16,4 +16,33 @@
> 1. tag里一般存放的是操作标签或者房间名（这个可以自定义）。<br />
> 2. msg里存放的是消息，也可以是某个命令的主要参数，例如在加入房间的指令中，msg存放的是房间id。<br />
> 3. opt是一个Boolean类型的值，用来标识这个信息是否为指令，即用于操作WS服务器进行某些操作（例如加入房间，删除房间等等）。<br />
> 4. arg是一个obj，包括了这个命令的附加参数，在非命令的信息里最好还是不要存在arg，**后续可以考虑加入可以自定义的数据域，可以传输一些附加参数到服务器。**<br />
> 4. arg是一个obj，包括了这个命令的附加参数，在非命令的信息里最好还是不要存在arg，**后续可以考虑加入可以自定义的数据域，可以传输一些附加参数到服务器。**<br />
### Step1. 加入Room之间的数据交换
在客户端申请加入一个room时候，会向服务器发送一个这样子的请求：
```JSON
{
"tag": "setRoom",
"msg": Roomid,
"opt": true,
"arg": {}
}
```
> 其中的arg字段可以不写，因为实际上服务器并不会调用这个arg。当然，为了遵守规范，在底层实际编写的时候还是会保留一个空对象结构arg。
服务端在接收到这个请求之后就先回去判断用户是否已经加入某个房间，由于设计上并不考虑一客户端加入到多个房间的情况，所以成功加入的话就会自动从原来房间退出。如果原来从未加入过房间，则对应客户端的对象内不会包含roomid元素即它的值是`undefined`。如果检测到未加入过房间，则直接将client请求的roomid直接赋值进去。如果原来已经加入过room，即room不为`undefined`则新值会替换原来的值，并在后端给予一定的提示（未来也许会加入多房间功能或者进退房间提示等等...，现在属于是预留了最基本的条件了）。
如果服务器已经完成了工作，就会给予客户端一个回应，回应体结构如下：
```JSON
{
"msg": "Join room success!",
"opt": false,
"tag": "reply",
"arg":{
"topic": "JoinRoom",
"reasonCode": 200
}
}
```
这个结构是固定的，所以client直接用识别内容即可。
> reasonCode目前还未定义其含义。

9
app.js
View File

@ -18,11 +18,20 @@ wsServer.on('request', (websocketRequest) => {
if(msg.type == 'utf8'){
try {
cd = JSON.parse(msg.utf8Data);
/* Not support multiply room */
if(cd.tag == 'setRoom' && cd.opt == true){
if(connection.roomid == undefined){
connection.roomid = cd.msg;
}
console.log("Set! roomid = " + connection.roomid);
connection.sendUTF(JSON.stringify({
'tag': 'reply',
'msg': 'Join room success!',
'opt': false,
'arg':{
'topic': 'JoinRoom'
}
}));
}
if(cd.tag == 'roomcast' && cd.opt == true && cd.arg != undefined){
console.log('Cast!')

13
web/DIST/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Socket</title>
</head>
<body">
<div><input type="text" id="textin"><button onclick="send()">Submit</button> <button onclick="Broadcast()">Submit to room</button></div>
<input type="text" id="roomid"><button onclick="joinTheRoom()">JOIN</button><br />
<input type="text" id="WS-SERVER" value="ws://localhost:3000"><button onclick="InitWS()">Connect</button>
<script src="./js/websocket.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

5
web/DIST/js/main.js Normal file
View File

@ -0,0 +1,5 @@
aROOM = 0
document.getElementById('WS-SERVER').value
var context = document.getElementById('textin').value;
aROOM = document.getElementById('roomid').value;
var context = document.getElementById('textin').value;

45
web/DIST/js/websocket.js Normal file
View File

@ -0,0 +1,45 @@
class Websocket2Clinet{
// Constructor
constructor(server_addr){
if("WebSocket" in window){
console.log("您的浏览器支持Websocket");
ws = new WebSocket(server_addr);
ws.onopen = function(){
console.log("connected!");
}
ws.onmessage = function(evt){
var rece = evt.data;
console.log("received: "+ rece);
}
ws.onclose = function(){
console.log("disconnected!");
}
}else{
alert("您的浏览器不支持Websocket");
}
}
Broadcast(content, roomid){
// var data = {'tag': 'roomcast', 'msg': context, 'opt': true, 'arg': {'roomid': aROOM}};
// ws.send(JSON.stringify(data));
ws.send(JSON.stringify({'tag': 'roomcast', 'msg': content, 'opt': true, 'arg': {'roomid': roomid}}));
}
joinTheRoom(roomid){
// var Datas = {'tag': 'setRoom', 'msg': aROOM, 'opt': true};
// ws.send(JSON.stringify(Datas));
// console.log("Join to room " + aROOM);
// 结果返回
ws.send(JSON.stringify({'tag': 'setRoom', 'msg': roomid, 'opt': true}));
console.log("Join to room: " + roomid);
}
send(content){
// var data = {'tag': 'public', 'msg': context, 'opt': false};
// ws.send(JSON.stringify(data));
ws.send(JSON.stringify({'tag': 'public', 'msg': content, 'opt': false}));
}
}