基本介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

简易聊天室实现

思路

前端实现

事件

open ：连接建立时触发
message：客户端接收服务端数据时触发
error：通信发生错误时触发
close：连接关闭时触发

步骤

目录文件
entry.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>用户名：  <input id="userName" type="text" placeholder="请输入用户名"></div><div>密码：  <input id="passWord" type="text" placeholder="请输入密码"></div><button id="btn">登入</button><script src="./js/entry.js"></script></body>
</html>

entry.js

登录跳转

((doc, location) => {const useName = doc.querySelector('#userName')const passWord = doc.querySelector('#passWord')const btn = doc.querySelector('#btn')const init = () => {bindEvent()}function bindEvent() {btn.addEventListener('click', handClick, false)}function handClick () {// 输入用户名密码console.log('useName', useName, useName.value)console.log('passWord',passWord, passWord.value )//  跳转至聊天室if ( useName.value && passWord.value) {location.href = 'index.html?useName='+ useName.value + '&passWord='+ passWord.value}}init ()
})(document, location)

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="list"></ul><input id="message" type="text" placeholder="请输入消息"><button id="send">发送</button><script src="./js/index.js"></script>
</body>
</html>

index.js

绑定各种事件

((doc) => {const oList = doc.querySelector('#list')const oMsg = doc.querySelector('#message')const oSendbtn = doc.querySelector('#send')const ws = new WebSocket('ws:localhost:8000')let userName = ''let passWord = ''const init = () => {let url = location.searchif (url.indexOf('?') !== -1) {let str = String(url).slice(0)let arr =  str.split('&')userName = arr[0].split('=')[1]passWord = arr[1].split('=')[1]console.log('userNamepassWord', userName, passWord)}bindEvent()}// 绑定事件处理函数function bindEvent() {oSendbtn.addEventListener('click', handSend, false)console.log('ws', ws)ws.addEventListener('open', handleOpen, false)ws.addEventListener('close', handleClose, false)ws.addEventListener('error', handleError, false)ws.addEventListener('message', handleMessage, false)}function handSend (e) {const msg = oMsg.valueif (!msg.trim().length) {return}// 这里需传json字符串，二进制等ws.send(JSON.stringify({user: userName,passsword: passWord,msg,dateTime: new Date()}))console.log('send', e)oMsg.value = ''}function handleOpen (e) {console.log('open', e)}function handleClose (e) {console.log('close', e)}function handleError (e) {console.log('error', e)}function handleMessage (e) {console.log('message', e)const msgData = JSON.parse(e.data)console.log('msgData', msgData)oList.appendChild(createMsg(msgData))}function createMsg(data) {const {user, msg, dateTime} = dataconst oItem = doc.createElement('li')oItem.innerHTML = `<p><span>${user}</span><i>${dateTime}</i></p><p>消息：${msg}</p>`return oItem}init()
})(document)

后端实现

事件

open ：连接建立时触发
message：客户端接收服务端数据时触发
error：通信发生错误时触发
close：连接关闭时触发
connection：监测websocket连接

步骤

index.js

绑定事件开启服务

const Ws = require('ws').Server
;((Ws) => {// ws:localhost:8000const server = new Ws({port: 8000})const init = () => {bindEvent()}function bindEvent () {server.on('open', handleOpen)server.on('close', handleClose)server.on('error', handleError)server.on('connection', handleConnection)}function handleOpen (ws) {console.log('server open')}function handleClose (ws) {console.log('server close')}function handleError (ws) {console.log('server error')}function handleConnection (ws) {console.log('server connection')ws.on('message', handleMessag)}function handleMessag (msg) {console.log('msg', msg.toString())server.clients.forEach(c => {c.send(msg.toString())})console.log(server.clients)}init()
})(Ws)

效果

WebSocket原生JavaScript实现简易聊天室相关推荐

Java WebSocket编程与网页简易聊天室
在webSocket还未引入前,许多开发人员通过各种非正规手段来完成更新网站的最新信息和到所有当前访问者的任务,其中一种手段就是通过浏览器向服务器轮询更新,但这种手段的网络延迟比较明显,其用户体验比较 ...
HTML5 之WebSocket入门demo和简易聊天室
HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏 ...
WebSocket+Tomcat实现网页简易聊天室
简单的说一下什么是websocket,它是基于TCP的服务器与客户端之间全双工通信的一种协议,允许服务端主动推送消息给客户端,只需要一次握手,就可以在服务端和客户端之间建立持久相连接,在这里我们只用到 ...
Go实现简易聊天室（群聊）
参考:Go 群聊 ( goroutine ) · 语雀基于websocket的聊天室,可进一步参考: (1) go实现聊天室(WebSocket方式) (2) Golang代码搜集-基于websoc ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
原创回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）
对昨天的简易聊天室进行优化增加一个mes对象,将传送的数据放在对象里增加一个mes对象,将传送的数据放在对象里 wsServer.js中替换代码 broadcast(conn.nickname + ...
连夜撸了一个简易聊天室
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 分不清轮询.长轮询?不知道什么时候该用websocket还 ...
撸一个简易聊天室，不信你学不会实时消息推送（附源码）
点击上方好好学java ,选择星标公众号重磅资讯,干货,第一时间送达今日推荐:推荐 19 个 github 超牛逼项目!个人原创100W +访问量博客:点击前往,查看更多分不清轮询.长轮询? ...
Express+Socket.IO 实现简易聊天室
代码地址如下: http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: ...

WebSocket原生JavaScript实现简易聊天室

WebSocket原生实现

WebSocket-Vue2

WebSocket-Vue3

基本介绍

简易聊天室实现

前端实现

事件

步骤

后端实现

事件

步骤

效果

WebSocket原生JavaScript实现简易聊天室相关推荐

最新文章

热门文章