美文网首页前端社团
微信聊天系统

微信聊天系统

作者: wuyumumu | 来源:发表于2016-10-15 00:11 被阅读0次

socket.io

Node.js中使用socket的一个包。使用它可以很方便地建立服务器到客户端的sockets连接,发送事件与接收特定事件。

  • 通过npm进行安装 npm install socket.io 。
  • 安装后在node_modules文件夹下新生成了一个socket.io文件夹,其中我们可以找到一个socket.io.js文件。将它引入到HTML页面,这样我们就可以在前端使用socket.io与服务器进行通信了。 <script src="/lib/socket.io/socket.io.js"></script>
  • 同时服务器端的server.js里跟使用express一样,也要通过 require('socket.io') 将其引入到项目中,这样就可以在服务器端使用socket.io了。
    需要前后端都引入socket.io
  • 原理,服务器保存好所有的 Client->Server 的 Socket 连接,Client A 发送消息给 Client B 的实质是:Client A -> Server -> Client B。
    即 Client A 发送类似 {from:'Client A', to:'Client B', body: 'hello'} 的数据给 Server。Server 接收数据根据 to值找到 Client B 的 Socket 连接并将消息转发给 Client B

socket.io的使用

  • 使用socket.io,其前后端句法是一致的,即通过socket.emit()来激发一个事件,通过socket.on()来侦听和处理对应事件。这两个事件通过传递的参数进行通信。

自己聊天页面的实现

页面框架的实现


image.png
image.png
socket.io实现两个在线的人聊天

建立用户表的数据结构

var userSchema = new Schema({
  username: String,
  password: String,
  phone: String,
  friend:[]
});

建立friend表

var friendSchema = new Schema({
    friendID:String
});

建立message表

var msgSchema = new Schema({
  friendID:String,
  usrID:String,
  content:String,
  status:Number
});
添加用户登录,如果用户登录的话,把该用户加入到在线的user中去

在bin>www里面添加代码

var io = require('socket.io').listen(server);
var users=[];
io.on('connection', function(socket) {
  socket.on('login', function(usrName) {
    if (users.indexOf(usrName) > -1) {
      console.log("user existed");
    } else {
      socket.userIndex = users.length;
      socket.username = usrName;
      users.push(usrName);
      console.log(usrName);
      io.sockets.emit('system', usrName); //向所有连接到服务器的客户端发送当前登陆用户的昵称
    };
  });
  socket.on('chat message', function(msg){
    socket.broadcast.emit('newMsg', socket.username, msg);
  });

在前端public>js>chatList.js添加代码用来添加显示对话

    function init() {
        var socket = io();
        $('#loginBtn').click(function (){
            var username = $.cookie('username');
            socket.emit('login', username);
        });
        $('.inputMsg').submit(function () {
            var msg=$('#messageInput').val();
            $('#messageInput').val('');
            socket.emit('chat message',msg);
            displayNewMsg('me', msg);
            return false;
        });
        socket.on('newMsg', function(user, msg) {
            displayNewMsg(user, msg);
        });
    }
   //用来判断是自己的消息还是别人的消息
    function displayNewMsg(user, msg) {
        var itemArr = [];
        itemArr.push('<li class="'+(user === "me" ? "me" : "other")+'">');
        itemArr.push('<div class="time">');
        itemArr.push('<span>time</span>');
        itemArr.push('</div>');
        itemArr.push('<div class="msg">');
        itemArr.push('<img src="/images/2.jpg" class="img-rounded">');
        itemArr.push('<p>'+msg+'</p>');
        itemArr.push('</div>');
        itemArr.push('</li>');
        $('.historyMsg ul').append(itemArr.join(''));
    }
image.png

相关文章

  • 微信聊天系统

    socket.io Node.js中使用socket的一个包。使用它可以很方便地建立服务器到客户端的sockets...

  • 设计微信的聊天系统

    Intro 一开始是被邀回答这个问题, 如果好设计微信, 需要学哪些技术? 我觉得时间比空口罗列技术关键词要稍微有...

  • 查记录

    某日升级系统,但内存不够,遂删掉微信等几个app,再次安装微信,却发现聊天记录全没了, 我:呜呜(┯_┯)我的微信...

  • JMeter测试WebSocket的经验总结

    最近有一个微信聊天系统的项目需要性能测试,既然是测试微信聊天,肯定绕不开websocket接口的测试,首选工具是J...

  • 微信聊天系统之发送图片

    发送图片分为三种情况 表情包的发送 本地图片的发送 截图之后ctrl+v发送 表情包的发送 因为表情包是每个客户端...

  • 微信小程序聊天系统搭建

    本文主要介绍基于公司的一个微信小程序(药顾问)项目socket客服模块的搭建 本文目录: 1、搭建HTTPS和ws...

  • 微信聊天

    1、开个小玩笑。 2、谈女生有关的话题。 不要评价、不要提问、不要直接邀约,太鲁莽了。 1、我们是朋友吗? 当然是...

  • 微信聊天

    陈辰和朱梅是一对从农村来上海打工的夫妻,育有一子在老家上学和奶奶一起生活。 没有孩子在身边,所以他们下班后空闲时间...

  • 微信聊天

    这个对我们预售工作跟客户聊天是十分重要的,比方有一些禁用表情,站在对方的立场去考虑发微信等等

  • 微信聊天

    一般不会有太大反感 因为好像都可以体谅 可能意思不是那个意思 总之就是一定要站在别人的立场去发一些信息

网友评论

    本文标题:微信聊天系统

    本文链接:https://www.haomeiwen.com/subject/lxynyttx.html