|
|
@@ -0,0 +1,106 @@
|
|
|
+
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Title</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="txtcontent" style="width: 500px;height: 250px;border: 1px solid gray"></div>
|
|
|
+ <div>所有用户:<select id="listuers"></select></div>
|
|
|
+ <div>你的昵称:<input type="text" id="username" /></div>
|
|
|
+ <div>
|
|
|
+ 回复内容:
|
|
|
+ <textarea style="width: 500px;height: 100px" id="txtmsg"></textarea>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button onclick="connectServer()">连接服务器</button>
|
|
|
+ <button onclick="send()">发送消息</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var socket = null; //将socket实例保存到变量中
|
|
|
+ var isLogin = false; //登录标识符
|
|
|
+
|
|
|
+ //1、链接服务端
|
|
|
+ function connectServer(){
|
|
|
+ var username = document.getElementById('username').value;
|
|
|
+ //如果用户名为空
|
|
|
+ if(username == ''){
|
|
|
+ alert('用户昵称不能为空');
|
|
|
+ }
|
|
|
+
|
|
|
+ //2、实例化
|
|
|
+ socket = new WebSocket('ws://192.168.33.10:2346');
|
|
|
+
|
|
|
+ //3、打开的时候，发送消息
|
|
|
+ socket.onopen = function(){
|
|
|
+ socket.send('login:' + username); //谁登录了
|
|
|
+ };
|
|
|
+
|
|
|
+ //4、接收服务器返回的数据
|
|
|
+ socket.onmessage = function(e){
|
|
|
+ //console.log(e);
|
|
|
+ var getMsg = e.data; //返回的数据
|
|
|
+
|
|
|
+ //解析getMsg。思路：通过正则匹配，显示出来
|
|
|
+ if(/^notice:success$/.test(getMsg)){ //服务端验证通过
|
|
|
+ isLogin = true;
|
|
|
+ }else if(/^msg:/.test(getMsg)){ //将服务端返回的普通消息显示出来
|
|
|
+ var p = document.createElement('P');
|
|
|
+ //将msg:替换为空
|
|
|
+ p.innerHTML = '<span>服务端返回的消息：</span>' + getMsg.replace('msg:','');
|
|
|
+ document.getElementById('txtcontent').appendChild(p); //追加节点
|
|
|
+ }else if(/^users:/.test(getMsg)){ //广播（将所有用户昵称显示出来）
|
|
|
+ //console.log(getMsg);
|
|
|
+ nicheng = getMsg.replace('users:',''); //{"61.144.116.123":"yangxi"}
|
|
|
+ shownicheng = eval('('+nicheng+')'); //转json
|
|
|
+
|
|
|
+ var listusers = document.getElementById('listuers');
|
|
|
+ listusers.innerHTML = ''; //先清空
|
|
|
+ for(var key in shownicheng){
|
|
|
+ var option = document.createElement('option');
|
|
|
+ option.value = key; //ip
|
|
|
+ option.innerHTML = shownicheng[key]; //将昵称填充进去
|
|
|
+ listusers.appendChild(option); //追加节点
|
|
|
+ }
|
|
|
+ }else if(/^dian:/.test(getMsg)){ //单播（点对点发消息）
|
|
|
+ //console.log(getMsg);
|
|
|
+ var p = document.createElement('P'); //创建节点
|
|
|
+ //将msg:替换为空
|
|
|
+ p.innerHTML = '<span>单播的消息：</span>' + getMsg.replace('dian:','');
|
|
|
+ document.getElementById('txtcontent').appendChild(p); //追加节点
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //5、服务端关闭
|
|
|
+ socket.onclose = function(){
|
|
|
+ isLogin = false;
|
|
|
+ alert('服务器断开');
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ //发送消息按钮
|
|
|
+ function send(){
|
|
|
+ if(!isLogin){
|
|
|
+ alert('请先通过服务器验证');
|
|
|
+ }
|
|
|
+
|
|
|
+ //获取要发送的内容
|
|
|
+ var msg = document.getElementById('txtmsg').value;
|
|
|
+ //发送消息给服务端
|
|
|
+ socket.send('msg:' + msg);
|
|
|
+
|
|
|
+ //单聊，点对点发送消息
|
|
|
+ var listusers = document.getElementById('listuers');
|
|
|
+ var toUserIPP = listusers.options[listusers.selectedIndex].value; //收消息的ip
|
|
|
+ var toUserName = listusers.options[listusers.selectedIndex].text; //收消息的昵称
|
|
|
+ socket.send('dian:<' + toUserIPP + '>:' + msg);
|
|
|
+
|
|
|
+ //将发出的普通消息显示出来
|
|
|
+ var p = document.createElement('p');
|
|
|
+ p.innerHTML = '<span>客户端发出的消息：</span>' + msg;
|
|
|
+ document.getElementById('txtcontent').appendChild(p);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
dever
преди 6 години