socket.io+express实现聊天室的思考（一）

fjcgreat 发布于2019-08-21 12:00 / 3315人阅读

摘要：但是需要注意的一点是协议是建立在协议基础之上的，需要经过一次握手。所以连接的发起方仍是客户端。是一个简洁而灵活的应用框架提供一系列强大特性帮助你创建各种应用。这也是为什么要采用协议来实现聊天室的原因。

从开始写到完善差不多断断续续差不多半个月时间，虽然还没有打到想要的效果但还是阶段性总结一下。（下一步加入打算视频通讯功能）本文默认你已掌握 node 相关基础知识

GitHub地址：https://github.com/HelenHai/n...

前导知识 webSocket协议

是区别是 HTTP 的一种全双工通信协议，也就是说服务器可以主动推送信息到客户端。
但是需要注意的一点是： webSocket协议是建立在HTTP协议基础之上的，需要经过一次握手。所以连接的发起方仍是客户端。

express

Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。具体点讲，Express框架建立在node.js内置的http模块上，通过封装HTTP模块，让开发者更加便捷的去搭建服务器

socket.io

Node.js中使用socket的一个包。使用socket.io可以很方便的建立服务器到客户端的sockets连接。
socket.io分为两部分：

在浏览器中运行的客户端库

面向node.js的服务端库

而 emit 和 on可以说是socket.io的核心，通过 emit 和 on 可以实现服务器和客户端之间的通信

整体思路

客户端将信息发送至服务器端，服务端再将这些信息广播到客户端。这也是为什么要采用webSocket 协议来实现聊天室的原因。

实现一个简单的聊天室，我们需要实现以下内容：
【聊天模式】

群聊

独聊

【必需功能点】

发送文字

发送图片（或者文件）

发送emoji表情

【附加功能点】

自主选择文字颜色

显示在线用户列表

清屏

在架构这个项目时最好根据面向对象思想，符合UNIX哲学去设计。所以我们可以定义一个全局变量初始化整个项目，定义一个 Chat 类用于整个程序的开发

window.onload=function(){
    var chat = new Chat()
    chat._Init() 
}

var Chat = function(){
    this.socket = null
}

之后我们向 Chat 原型添加业务方法

_Init()                             //初始化
_InitialEmoji()                     //初始化emoji表情
_DisplayNewMsg(user, msg, color)    //显示发送过来的消息
_DisplayImage(user, imgData, color) //显示图片
_ShowEmoji(msg)                     //显示emoji表情

_DisplayOneMsg(user,msg,color)      //实现独聊

前后端通信及Chat原型的实现 （客户端）chat.js

以下代码定义了整个程序都要使用的Chat类，之后的处理消息等所有业务逻辑都写在这个类中

Chat.prototype={
    _Init:()=>{
        var that=this
        //关键！建立到服务器的连接
        this.socket=io.connect()    
        //监听socket的connect事件，此事件表示连接已建立
        this.socket.on("connect",function(){
            //....
        })
    }
    
    //其他业务逻辑
    _InitialEmoji()                     //初始化emoji表情
    _DisplayNewMsg(user, msg, color)    //显示发送过来的消息
    _DisplayImage(user, imgData, color) //显示图片
    _ShowEmoji(msg)                     //显示emoji表情
    
    _DisplayOneMsg(user,msg,color)      //实现独聊
}

（服务端）server.js

const express = require("express"),
      app = express(),
      server = require("")
      io = require("socket.io").listen(server)

//创建一个数组保存在线所有用户昵称
var users = []
//存储在线用户
var socketList = {}

app.use("/", express.static(__dirname + "/pages"))
server.listen(3000, function () { 
  console.log("服务器已成功启动")
})  

//socket.io绑定到客户端的连接
io.sockets.on("connection",function(socket){

//通过socket.on()来监听客户端事件
})

参考资料

【聊天室demo】http://www.cnblogs.com/Wayou/...
【socket.io文档】https://socket.io
【express文档】http://expressjs.com/en/4x/ap...

GPU云服务器云服务器 socket.io cdn socket.io webrtc socket.io socket.io webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87332.html

socket.io+express实现聊天室的思考（三）

摘要：不过这种方案存在一个问题，就是无法发送图片。尤其是对等标签需要格外的注意。后端必须对前端传过来的数据进行再次验证。这一篇文章主要是对安全性的思考，首先了解一下一些常见的网络攻击 xss跨站点脚本攻击 XSS是注入攻击的一种，其特点是不对服务器造成任何伤害，而是通过一些正常的站内交互途径，发布含有js的攻击代码，如果服务器没有没有过滤或者转义这些脚本，作为内容发布到了页面上，其他用...

JerryZou 2019-08-20 18:36 评论0 收藏0
socket.io+express实现聊天室的思考（二）

摘要：优化聊天室的一些新的技巧调色盘调用效果图如下打开新页面图片预览优化聊天室的一些新Get的技巧调色盘调用效果图如下：showImg(https://segmentfault.com/img/bVSksq?w=558&h=454); 打开新Tab页面图片预览 _DisplayImage:(user,imgData,color)=>{ var userMsg=document...

付永刚 2019-08-01 17:22 评论0 收藏0
socket.io+express实现聊天室的思考（二）

摘要：优化聊天室的一些新的技巧调色盘调用效果图如下打开新页面图片预览优化聊天室的一些新Get的技巧调色盘调用效果图如下：showImg(https://segmentfault.com/img/bVSksq?w=558&h=454); 打开新Tab页面图片预览 _DisplayImage:(user,imgData,color)=>{ var userMsg=document...

weakish 2019-08-20 18:34 评论0 收藏0
手把手教你撸一个网页聊天室

摘要：前端逻辑搞定之后，思考一下这个聊天室的交互是怎么实现的。在前端监听一个事件，这个事件的触发条件是成功和服务端建立连接。携带一个参数，即用户的输入。别人发送的消息现在就需要在前端建立一个响应服务端有新消息的监听事件了。一些废话:) 最近在学校比较闲，终于有这么一块时间可以自由支配了，所以内心还是十分的酸爽舒畅的。当然了，罪恶的事情也是有的，比如已经连续一周没有吃早饭了，其实现在回头想想...

nemo 2019-08-20 12:34 评论0 收藏0
手把手教你撸一个网页聊天室

摘要：前端逻辑搞定之后，思考一下这个聊天室的交互是怎么实现的。在前端监听一个事件，这个事件的触发条件是成功和服务端建立连接。携带一个参数，即用户的输入。别人发送的消息现在就需要在前端建立一个响应服务端有新消息的监听事件了。一些废话:) 最近在学校比较闲，终于有这么一块时间可以自由支配了，所以内心还是十分的酸爽舒畅的。当然了，罪恶的事情也是有的，比如已经连续一周没有吃早饭了，其实现在回头想想...

leiyi 2019-08-01 16:00 评论0 收藏0