当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 17:38:54 HTML5

websocket小结在聊天室系统中,经常使用websocket作为主要的通讯方式。参考地址:https://www.jianshu.com/p/00e...关于我的看法:websocket协议是一种新的tcp协议,无论是客户端还是服务,都与常用的http协议不同两个终端都可以自由通信,双方都比较灵活,不会有局限性。本文提到的socket.io包是对websocket协议进行封装的包。包含大量服务器端处理代码,兼容性强,主要服务于实时通信。在开始之前,您需要构建一个网络服务。主要用到的包是socket.io和http服务包。由于是node后台,所以需要设置监听端口,方便在浏览器中调试。/*app.js*//*构建http服务*/varapp=require('http').createServer()/*引入socket.io*/vario=require('socket.io')(app);/*定义监听端口,可以自定义,端口不要被占用*/varPORT=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接受客户端的传输data同方法名,后面的函数function是具体的登录验证操作,如用户验证是否存在。(3)服务器验证成功,将反馈信息发送给客户端。从上面我们知道,当一端向另一端发送请求时,需要用到socket.emit()方法,只不过这次是服务端向客户端发送消息。socket.emit('loginSuccess',data)这里,返回客户端之前发送的请求,让客户端进行操作。(4)客户端接收返回结果的方法还是socket.on(),只不过这次客户端接收的是服务器发回的信息。socket.on('loginSuccess',function(data){if(data.username===uname){checkin(data)}else{alert('用户名不匹配,请重试')}})functioncheckin(data){/*隐藏登录界面,显示聊天首页*/$('.login-wrap').hide('slow');$('.chat-wrap').show('slow');}通过以上4步,一个成功的登录请求就成功了。全频道广播功能项目中提到了全频道广播功能,io.sockets.emit的定义是服务端进行全频道广播,即向所有客户端广播,也是同理就像我们经常在聊天中收到官方推送一样。io.sockets.emit('leave',username)当用户进入或离开时,会广播所有频道,即通过io.sockets.emit方法。最后再次感谢博主@一岑不再写的demo工程,让我受益匪浅。博主一岑主文传送门:链接说明