happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

栏目: Html5 · 发布时间: 4年前

内容简介:乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能。因为这个自己做了PC端,无线端(手机端),以及使用cordova打包成一个android的apk。实现了一个大前端的项目,虽然现在android端还是有点有问题,在修改bug。因为 HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点,注

一、前言

乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能。因为这个自己做了PC端,无线端(手机端),以及使用cordova打包成一个android的apk。实现了一个大前端的项目,虽然现在android端还是有点有问题,在修改bug。

二、websocket的原理介绍

1、为什么需要websocket?

因为 HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用"轮询":每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。

2、简介

websocket特点:服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

其他特点包括:

(1)建立在 TCP 协议之上,服务器端的实现比较容易。

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

(3)数据格式比较轻量,性能开销小,通信高效。

(4)可以发送文本,也可以发送二进制数据。

(5)没有同源限制,客户端可以与任意服务器通信。

(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

三、websocket.io使用

1、前端

在vue项目中,在index.html中

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script>
      // const socketWeb = io('http://localhost:3000');
      const socketWeb = io('http://chat.chengxinsong.cn');
      const userInfo = JSON.parse(sessionStorage.getItem("HappyChatUserInfo"))
      if (userInfo) {
        socketWeb.emit('update', userInfo.user_id);
      }
</script>

2、后端

后端是使用koa作为后端

const app = new Koa();

const server = require("http").createServer(app.callback());
const io = require("socket.io")(server);
io.on("connection", socket => {
    const socketId = socket.id;
    /*登录*/
    socket.on("login", async userId => {
        await socketModel.saveUserSocketId(userId, socketId);
    });
    // 更新soketId
    socket.on("update", async userId => {
        await socketModel.saveUserSocketId(userId, socketId);
    });
    //私聊
    socket.on("sendPrivateMsg", async data => {
        const arr = await socketModel.getUserSocketId(data.to_user);
        const RowDataPacket = arr[0];
        const socketid = JSON.parse(JSON.stringify(RowDataPacket)).socketid;
        io.to(socketid).emit("getPrivateMsg", data);
    });
    // 群聊
    socket.on("sendGroupMsg", async data => {
        io.sockets.emit("getGroupMsg", data);
    });

    //加好友请求
    socket.on("sendRequest", async data => {
        console.log("sendRequest", data);
        const arr = await socketModel.getUserSocketId(data.to_user);
        const RowDataPacket = arr[0];
        const socketid = JSON.parse(JSON.stringify(RowDataPacket)).socketid;
        console.log('给谁的socketid',socketid)
        io.to(socketid).emit("getresponse", data);
    });
    socket.on("disconnect", data => {
        console.log("disconnect", data);
    });
});

四、简介和功能

乐聊,一个快乐聊天的应用,支持PC端和无线端和安卓APP。

(1)PC端和无线端线上地址: http://chat.chengxinsong.cn

(2)下载安卓APP地址:暂时还有点小问题待解决,后边放出地址

版本v 1.0.0

- 1、支持注册用户和邮件激活用户;
- 2、支持登陆
- 3、支持机器人聊天;
- 4、支持加好友,一对一聊天;
- 5、支持创建群,加群,一对多聊天;
- 6、支持删除好友,退出群
- 7、支持个人信息编辑
- 8、支持添加好友备注
- 9、支持聊天中文字发送
- 10、支持浏览器:Chrome,Firefox,Safari,IE9及以上;
  • 版本v 1.1.0

    • 1、支持聊天中图片发送
    • 2、支持聊天中表情发送
    • 待续

五、运行截图

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

等等。。。

六、前后端源码

前端代码: https://github.com/saucxs/hap...

后端代码: https://github.com/saucxs/hap...

七、最后

欢迎fork和star,有问题提issue


以上所述就是小编给大家介绍的《happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Master Switch

The Master Switch

Tim Wu / Knopf / 2010-11-2 / USD 27.95

In this age of an open Internet, it is easy to forget that every American information industry, beginning with the telephone, has eventually been taken captive by some ruthless monopoly or cartel. Wit......一起来看看 《The Master Switch》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具