关于websocket制作聊天室的的一些总结

scwang90 发布于2019-08-05 14:15 / 447人阅读

摘要：的总结在一个聊天室系统中，常常使用作为通信的主要方式。服务端对客户端所发送的请求进行处理登陆验证等操作在这里，通过来接受客户端所传递的数据，为相同方法名，其后跟的函数为登陆验证的具体操作，比如用户验证是否存在。

websocket的总结

在一个聊天室系统中，常常使用websocket作为通信的主要方式。
参考地址：https://www.jianshu.com/p/00e...

关于自己的看法：
websocket协议是一种新的tcp协议，与常用的http协议不同的地方在于，无论是客户端还是服务端，都能进行自由通信，双方都比较灵活，不会有局限性。
文中所提到的socket.io包是封装有websocket协议的包，他包含不少服务端处理的代码，兼容性强，主要服务于实时通信。
开始之前，需要构建网络服务，主要用到的包就是socket.io和http服务的包，由于是node的后台，所以需要设置一个进行监听的端口，方便在浏览器中调试。

/*app.js*/
/*构建http服务*/
var app = require("http").createServer()
/*引入socket.io*/
var io = require("socket.io")(app);
/*定义监听端口，可以自定义，端口不要被占用*/
var PORT = 8081;
/*监听端口*/
app.listen(PORT);

后台系统为nodejs搭载

主要应用在聊天系统中socket.io中的方法：

socket.emit()

socket.on()

io.sockets.emit()

对于第一种，socket.emit()方法主要是在客户端和服务端之间进行信息请求，例如客户端向服务端发送请求或者服务端向客户端进行反馈请求，这两种情况下主要用到的方法。
需求场景：客户端上，用户输入账号密码进行登陆，服务端怎么识别？
（1）首先是客户端获取到用户在输入框中的信息，然后对服务端进行发送信息。

socket.emit("login",{username:uname})

代码块中，login为自定义方法名，其后是传送的数据，项目中只考虑到用户名的输入，所以保存为一个对象发送给服务端，这里用到了socket.emit()方法，是客户端----->服务端的请求。
（2）服务端对客户端所发送的请求进行处理

socket.on("login",function(data){
    /*登陆验证等操作*/
})

在这里，通过socket.on来接受客户端所传递的数据，为相同方法名，其后跟的function函数为登陆验证的具体操作，比如用户验证是否存在。
（3）服务端验证成功了，把反馈信息发送给客户端。
通过上面知道，一端向另一端发送请求的时候，需要用到socket.emit()方法，但是这次是服务端向客户端进行发送消息。

socket.emit("loginSuccess",data)

这里，把之前客户端所发送的请求，再次返回去，让客户端进行操作。
（4）客户端接收返回结果
接收的方法，还是socket.on()，不过这次是客户端接收服务端所传递回来的信息。

socket.on("loginSuccess",function(data){
        if(data.username === uname){
            checkin(data)
        }else{
            alert("用户名不匹配，请重试")
        }
    })
   function checkin(data){
    /*隐藏登陆界面，显示聊天主页*/
        $(".login-wrap").hide("slow");
        $(".chat-wrap").show("slow");
}

通过以上4步，一次成功的登陆请求就成功了。

关于全频道广播功能
项目中提到了全频道的广播的功能，而io.sockets.emit的定义是服务端进行全频道广播，也就是对所有客户端进行广播，也跟我们常常在聊天中收到的官方推送一样。

 io.sockets.emit("leave",username)

当用户进入或者离开时，会进行全频道广播，也就是通过io.sockets.emit方法进行。

最后感谢@一岑不再博主所写的demo项目，让我受益匪浅。
一岑博主主要文章传送门：链接描述

云服务器专线服务 vps日常维护中的一些要点总结 websocket实现聊天室的的c语言 java的的使用

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

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

关于websocket制作聊天室的的一些总结

摘要：的总结在一个聊天室系统中，常常使用作为通信的主要方式。服务端对客户端所发送的请求进行处理登陆验证等操作在这里，通过来接受客户端所传递的数据，为相同方法名，其后跟的函数为登陆验证的具体操作，比如用户验证是否存在。 websocket的总结在一个聊天室系统中，常常使用websocket作为通信的主要方式。参考地址：https://www.jianshu.com/p/00e... 关于自...

Ocean 2019-08-22 18:21 评论0 收藏0
ws模块指南+Vue在线聊天室

摘要：简介模块是端的一个协议的实现该协议允许客户端一般是浏览器持久化和服务端的连接这种可以持续连接的特性使得特别适合用于适合用于游戏或者聊天室等使用场景模块相较于其他基于协议的模块来说非常的纯粹他只关注基于协议的实现其他例如提供了回退手段当无法使简介 ws模块是Node端的一个WebSocket协议的实现,该协议允许客户端(一般是浏览器)持久化和服务端的连接. 这种可以持续连接的特性使得W...

sydMobile 2019-08-05 18:08 评论0 收藏0
利用手机姿态控制网页中css长方体姿态

摘要：思路这个分为客户端，控制端和服务端。客户端是一个用写的三维的长方体，只接受数据。控制端使用事件来获取手机姿态并通过发送姿态数据。附之前写过两篇文章是关于用制作立方体和使用搭建聊天室对本文有点借鉴意义。思路这个 Demo 分为客户端，控制端和服务端。客户端是一个用css3写的三维的长方体，只接受websocket数据。控制端使用deviceorientation事件来获取手机姿态并通...

Profeel 2019-08-29 11:12 评论0 收藏0
利用手机姿态控制网页中css长方体姿态

摘要：思路这个分为客户端，控制端和服务端。客户端是一个用写的三维的长方体，只接受数据。控制端使用事件来获取手机姿态并通过发送姿态数据。附之前写过两篇文章是关于用制作立方体和使用搭建聊天室对本文有点借鉴意义。思路这个 Demo 分为客户端，控制端和服务端。客户端是一个用css3写的三维的长方体，只接受websocket数据。控制端使用deviceorientation事件来获取手机姿态并通...

Clect 2019-08-20 10:39 评论0 收藏0
项目开发

摘要：前端菜鸟项目，大佬们轻喷美团外卖项目演示地址第期分享推荐上好玩容易上手的项目，帮你找到编程的乐趣。包含支持冒泡的事件框架资源模块等组件，按需选择组件，不绑架开发者。基于 Vue 的 WebSocket 实时聊天实战项目一个基于vue的，从前端到后端构建的项目。能让学到如何用，用到了vue全家桶，nodejs，通过webpack打包，图灵机器人，websocket等前沿知识进行构建。...

elva 2019-08-05 12:53 评论0 收藏0