仿boss直聘聊天功能

最近仿boss直聘，开发了一个app，主要是为了做实时聊天的功能，实时聊天肯定需要至少两个用户登录app，所以在登录后就需要记住当前用户的唯一id，数据库用的是mongodb，创建用户后，会自动生成唯一的id
这里用的是vue-scoket.io ，首先npm安装相应的包

npm install vue-socket.io --save

以及

npm install socket.io-client --save

后者主要用户客户端，main.js中引入

import io from 'socket.io-client';
import VueSocketIo from 'vue-socket.io';Vue.use(new VueSocketIo({debug: true,connection: io('http://localhost:3000/') //填后台给的socket地址，端口号根据实际后台端口写
}))

完成前台的配置，还需要启动服务，首先

var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

在js文件中引入相关的包文件

io.on('connection', socket => {socket.on("setConnect", data => {// 获取连接的用户let MeId = data.MeId// 放在在线用户数组中idArr.push(MeId)// 放在在线用户对象中connIds[MeId] = socket.id});// 监听用户点击发送过来的消息socket.on("sentTo", data => {// 获取发往对方的id alet toId = data.toId// 对方用户已连接if (io.sockets.connected[connIds[toId]]) {io.sockets.connected[connIds[toId]].emit('message', {'MeId': data.MeId,'toId': toId,'msg': data.sub,'direction': 'left'});}});socket.on('disconnect', function() {console.log(socket.id, "连接断开");});
});

通过上面的方式，在服务端来实现监听客户端的发送的信息。
在客户端中通过页面中的sockets中来监听服务端返回的信息

sockets: {//这里是监听connect事件connect: function(data) {// 获取每台客服端生成的idthis.websocketid = this.$socket.id;},// 监听断开连接，函数disconnect() {console.log('断开服务器连接');},// 服务端指定有msg监听的客服端，可接对应发来的收消息，data服务端传的消息message(data) {console.log(data)},},

在进入页面后，客户端首先向服务端emit一个方法，后面是传递的参数，传递当前用户id，目的在于存储当前在线的用户
成功后保存。该方法名称需要与服务端监听的方法一样才能监听到

this.$socket.emit('setConnect',{MeId:_this.$store.state.role.currentId})

在发送按钮上绑定点击事件，点击发送的时候再次向服务端发送信息

this.$socket.emit('sentTo',{MeId:this.$store.state.role.currentId,toId:this.id,sub:this.newMessage})

传递要发送的对象，以及要发送的信息，传递当前用户是为了在离线时存入数据库，知道是谁向谁发送信息。

socket.on("sentTo", data => {// 获取发往对方的id alet toId = data.toId// 对方用户已连接if (io.sockets.connected[connIds[toId]]) {console.log('对方用户已连接')io.sockets.connected[connIds[toId]].emit('message', {'MeId': data.MeId,'toId': toId,'msg': data.sub,'direction': 'left'});}})

服务端在接收到信息后，首先判断对方用户是否存在,如果存在，实时转发到对方用户，对方用户通过sockets中定义的方法就能监听到服务端转发过来的信息。

message(data) {console.log(data)},

仿boss直聘聊天功能相关推荐

rn 实现上下滑动选择列表_用大前端技术实现的一款仿Boss直聘app（已开源）
鱼哥从去年8月我参加GDD(谷歌开发者大会)后,Flutter在一年中,版本迭代频繁,很多没有的功能都逐渐有了,很多从事移动端开发的,目前面临巨大冲击,因为大前端不是喊口号,而是确实能有巨大优势.之前 ...
react：仿BOSS直聘写的一个移动端招聘APP
大家好,我是梅巴哥儿.本篇分享一个仿BOSS直聘写的移动端招聘APP. 代码分享到了GitHub. 完整代码地址:https://github.com/guozi007a/guiguzhipin.gi ...
android 仿Boss直聘消息界面
最近好久没有更新我的博客了,之前5月份由于在一家苦逼的初创公司,一直有时间更新blog,上周离职了,好好休息了两天,上周面了一家公司感觉挺好的,这两天一边找工作一边写写博客吧.祝我顺利等到offer吧 ...
php仿boss直聘,仿BOSS直聘APP下拉刷新动画实现
转自微信公众号:iOS面向编码 BOSS直聘APP的下拉刷新动画蛮有趣的,我们来尝试实现一下. 先来看看最终效果: 关于实现思路: 实现思路这东西,并不是一成不变的,每个人心中都有自己喜欢的思想和套路 ...
boss直聘Android找工作界面,Android仿Boss直聘我的界面滑动效果
最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下.先看下仿的效果. image 其实我们拿到这个效果的时候,看到滑动,折 ...
boss直聘Android找工作界面,仿Boss直聘我的界面滑动效果
好久没有写博客了,最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下.先看下仿的效果. 其实我们拿到这个效果的时候,看到滑 ...
智联,拉钩,boss直聘,三款互联网招聘应用竞品分析
近年来在移动互联网浪潮的冲击下,凭借更好的用户体验和新颖的盈利模式,拉勾网和Boss直聘脱颖而出,成为了互联网垂直招聘模式中的佼佼者.虽然前程无忧和智联招聘两大传统招聘巨头也受到影响,在寻求转型中,但 ...
BOSS直聘自动投简历聊天机器人的实现过程
这两年疫情,公司业务越来越差,必须得准备后路了,每天睡前都会在直聘上打一遍招呼,一直到打哈欠有睡意为止...,这样持续了一周,发现很难坚持,身为一名资深蜘蛛侠,怎么能这样下去呢?于是便萌生了对BOSS ...
boss直聘实现自动回复以及自动获取简历功能
一.前言最近得知公司有内推活动,但是本人工作繁忙,于是打算写个脚本来获取简历,赚点外快.于是针对boss直聘,写了一个脚本,用以实现自动回复以及自动获取简历功能.下面是第一个月挣的收益: 二.代码 ...

仿boss直聘聊天功能

仿boss直聘聊天功能相关推荐

最新文章

热门文章