瀏覽代碼

添加私聊

chuwanghui 6 年之前
父節點
當前提交
9239f34bf5
共有 6 個文件被更改,包括 147 次插入21 次删除
  1. 5 0
      package-lock.json
  2. 2 1
      package.json
  3. 6 6
      usexpressmain.js
  4. 2 1
      usmain.js
  5. 38 9
      ussocket.htm
  6. 94 4
      uswebsocket.js

+ 5 - 0
package-lock.json

@@ -950,6 +950,11 @@
       "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
       "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
     },
+    "underscore": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.0.tgz",
+      "integrity": "sha512-4IV1DSSxC1QK48j9ONFK1MoIAKKkbE8i7u55w2R6IqBqbT7A/iG7aZBCR2Bi8piF0Uz+i/MG1aeqLwl/5vqF+A=="
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

+ 2 - 1
package.json

@@ -8,7 +8,8 @@
     "mongodb": "^3.0.7",
     "mysql": "^2.15.0",
     "socket.io": "^2.1.0",
-    "socketio": "^1.0.0"
+    "socketio": "^1.0.0",
+    "underscore": "^1.9.0"
   },
   "devDependencies": {},
   "scripts": {

+ 6 - 6
usexpressmain.js

@@ -5,8 +5,8 @@ us.http = require('http'); //引用包含http处理类
 us.querystring = require("querystring"); //引用获取参数类
 us.url = require("url"); //引用url地址处理类
 //-----------------------------------------引用包含用户模块---------------------------------
-us._usdb = require('./us.db.js'); //包含另外一个文件
-us.mongodb = require('./us.mongodb.js'); //引用mongodb数据库文件
+//us._usdb = require('./us.db.js'); //包含另外一个文件
+//us.mongodb = require('./us.mongodb.js'); //引用mongodb数据库文件
 
 
 //-------------------引入express模块,如果此处出错,请确认express已安装,------------------
@@ -17,10 +17,10 @@ var app = express();
 //以当前目录下的demo目录为web应用根目录
 app.use(express.static(__dirname + '/'));
 //显示错误信息,以方便调试
-app.use(express.errorHandler({
-    showStack: true,
-    dumpExceptions: true
-}));
+//app.use(express.errorHandler({
+//    showStack: true,
+//    dumpExceptions: true
+//}));
 
 app.all("*", function (req, res) {
     //备注:res.writeHead(200, {'Content-Type': 'text/plain'});//英文编码

+ 2 - 1
usmain.js

@@ -1,6 +1,6 @@
 var us = {}; //注册命名空间。
 //----------------------------------------引用包含系统模块---------------------------------
-us.http = require('http');//引用包含http处理类
+http = require('http');//引用包含http处理类
 us.querystring = require("querystring"); //引用获取参数类
 us.url = require("url"); //引用url地址处理类
 //-----------------------------------------引用包含用户模块---------------------------------
@@ -9,6 +9,7 @@ us.mongodb = require('./us.mongodb.js'); //引用mongodb数据库文件
 
 //----------------------------------------接受http请求--------------------------------------
 us.http.createServer(function (req, res) {
+    
     //备注:res.writeHead(200, {'Content-Type': 'text/plain'});//英文编码
     //备注:传递表单需要添加,'application/x-www-form-urlencoded'
     //备注:Access-Control-Allow-Origin解决ie10跨域,还未完全其他跨域,如chrome等,需要进一步完善。

+ 38 - 9
ussocket.htm

@@ -3,39 +3,68 @@
 <head>
     <title></title>
     <style type="text/css">
-        #box {    overflow: auto;width: 500px; height: 300px; border: 1px solid #dcdcdc; }
+        #box {    overflow: auto;width: 800px; height: 300px; border: 1px solid #dcdcdc; }
         #txtInput {  width: 430px; }
+        .userlogin{width:800px;height: 50px;;}
+        .userlogin div{float:left;width:120px;}
+        
     </style>
     <!-- <script src="http://lt.1473.cn/socket.io/socket.io.js" type="text/javascript"></script>-->
     <script src="http://127.0.0.1:888/socket.io/socket.io.js" type="text/javascript"></script>
+    <script type="text/javascript" charset="utf-8" src="http://www.1473.cn/uform.js "></script>    
     <script type="text/javascript">
         //TODO 这里是负责建立热线的代码  
         var socket = io.connect('http://127.0.0.1:888');
         //var socket = io.connect('http://lt.1473.cn');
-        // TODO 这里负责接收服务端息的代码
-        socket.on('bcast', function (r) {
-            document.getElementById("box").innerHTML+=r.msg+'<br>';
+        // TODO 这里负责接收服务端广播消息的代码
+        socket.on('broadCast', function (r) {
+            $("#messageArea")[0].innerHTML+=r.msg+'<br>';
         });
         function sendMsg() {
             var input = document.getElementById('txtInput');
             var str = input.value;//获取文本框中的值
             msgbox(str);//客户端信息追加到div
             //发送到服务端
-            socket.emit('msg', { msg: str });//向服务端发送消息
+            socket.emit('broadCast', { msg: str });//向服务端发送消息
             //console.log('[client]' + str);
             input.value = ""; 
-            input.focus(); //客户端操作
+            input.focus(); //输入框聚焦
         }
         //输出信息到div
         function msgbox(str) {
-            var box = document.getElementById('box');
+            var box = document.getElementById('messageArea');
             box.innerHTML += str + '<br>';
         }
+        //用户登录,不用注册,输入任何信息均能登录
+        userLogin=function(){
+            var username=document.getElementById("usernameinput").value;
+            //发送到服务端
+            socket.emit('socketLogin', { msg: username });//向服务端发送消息
+        }
+        //在好友区域添加好友
+        socket.on('addFriend', function (r) {
+            var _fdiv=$$("div",{"innerHTML":r.msg,"style":{"cssText":"width:200px;height:30px;background-color:gray;"}},$("#allFriends")[0]);
+            //$("#allFriends")[0].innerHTML+=r.msg+'<br>';
+        });
+        //登录用户重复提示
+        socket.on('UserNameRepeat', function (r) {
+            alert("用户名重复");
+            //$("#allFriends")[0].innerHTML+=r.msg+'<br>';
+        });
     </script>
 </head>
 <body>
     <h2>Chat Client</h2>
-	<div id='box' ></div>
-	<input type='text' id='txtInput' ><input type='button' value='SEND' onclick='sendMsg();'>
+    <div class="userlogin">
+        <input id="usernameinput" type='text' >
+        <input type='button' value="登录"  onclick='userLogin();'>
+    </div>
+	<div id='box' >
+        <div id="messageArea" style="width:500px;height: 300px; border-right:1px solid #dcdcdc; ; float: left;">
+             <div  style="width:500px;height: 300px; position: absolute; background-color: #dcdcdc;"></div>
+        </div>
+        <div id="allFriends" style="width:295px;height: 300px; float: left;" ></div>
+    </div>
+	<input type='text' id='txtInput' ><input type='button' value='广播' onclick='sendMsg();'>
 </body>
 </html>

+ 94 - 4
uswebsocket.js

@@ -2,10 +2,67 @@
 var us = {}
 //包含http模块
 us.http = require('http');
+//包含文件模块,以实现能够读取本目录下面任意文件的功能
+var fs = require('fs');
+//支持目录文件模块
+var path = require('path');
 //包含socket.io模块
 var socketio = require('socket.io');
-//创建httpserver
-us.app = us.http.createServer(function (req, res) {});
+//nodejs的underscore扩展中的findWhere方法,可以是我们很容易在对象集合中,通过对象的属性值找到该对象并返回。
+var _ = require('underscore');
+//构建文件读取路径。自己实现web服务器功能
+us.handler=function(request, response) {
+    console.log('request starting...');
+    var filePath = '.' + request.url;
+    if (filePath == './')
+        filePath = './index.html';
+
+    var extname = path.extname(filePath);
+    var contentType = 'text/html';
+    switch (extname) {
+        case '.js':
+            contentType = 'text/javascript';
+            break;
+        case '.css':
+            contentType = 'text/css';
+            break;
+        case '.json':
+            contentType = 'application/json';
+            break;
+        case '.png':
+            contentType = 'image/png';
+            break;      
+        case '.jpg':
+            contentType = 'image/jpg';
+            break;
+        case '.wav':
+            contentType = 'audio/wav';
+            break;
+    }
+
+    fs.readFile(filePath, function(error, content) {
+        if (error) {
+            if(error.code == 'ENOENT'){
+                fs.readFile('./404.html', function(error, content) {
+                    response.writeHead(200, { 'Content-Type': contentType });
+                    response.end(content, 'utf-8');
+                });
+            }
+            else {
+                response.writeHead(500);
+                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
+                response.end(); 
+            }
+        }
+        else {
+            response.writeHead(200, { 'Content-Type': contentType });
+            response.end(content, 'utf-8');
+        }
+    });
+}
+
+//创建httpserver,管理文件路径
+us.app = us.http.createServer(us.handler);
 //开启888端口,服务开始监听
 //us.app.listen(888);
 const hostname="127.0.0.1";
@@ -25,16 +82,49 @@ us.socketio = socketio.listen(us.app);
 //webSocket协议握手成功
 ////'connection' 是socket.io 保留的.不能错,结果在变量socket中
 us.socketio.sockets.on('connection', function (socket) {
+    //用户登录后端,以实现私聊,此处的登录只是把唯一的用户名放入内存。还未未实现cookie认证功能。
+    socket.on('socketLogin',function (data) {
+        //如果存在相同名称用户,弹出提示
+        var toSocket= _.findWhere(us.socketio.sockets.sockets,{name:data.msg});
+        if(toSocket){
+            //如果用户名重复,自己给自己发送消息,现在的socket是自己的socket。
+            socket.emit("UserNameRepeat",data.msg);
+            return;
+        }
+        //以唯一的用户名给该用户设置socket。
+        socket.name = data.msg;
+        
+        //把该用户名广播给其他用户,让其他用户好友列表中出现该用户
+        socket.broadcast.emit('addFriend', data);
+    });
+    //向其他人发送信息
+    socket.on('sayTo',function (data) {
+        var toName = data.to;
+        //查找是否存在该用户的socket。
+        var toSocket= _.findWhere(us.socketio.sockets.sockets,{name:toName});
+        //如果存在,则发送消息
+        if(toSocket){
+            //私聊
+            toSocket.emit('sayTo',data.msg);
+        }
+    })
+
     //前端javascript使用socket.emit('msg', { msg: str }); //字符串msg是自己定义的,
     //socket.on('msg',function (data) {}); 后端需要用msg接收前端发送来的消息。'msg'需要和客户端发送时定义的事件名相同。
-    socket.on('msg', function (data) {
+    socket.on('broadCast', function (data) {
         console.log('Get a msg from client ...');
         //console.log(data);
         //向客户端javascript发送广播,注意:这里广播消息为bcast,
         //则前端javascript用socket.on('bcast', function (r) {alert(r); });接收消息
-        socket.broadcast.emit('bcast', data);
+        socket.broadcast.emit('broadCast', data);
     });
     //console.log("WebSocket connect ok....");
+
+    
+    //断开链接
+    socket.on('disconnect', function(){
+        console.log(socket.name+' connection is disconnect!');
+    });
 })