html5新技术socket.io实现聊天室的方法
导读:收集整理的这篇文章主要介绍了html5新技术socket.io实现聊天室的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。<!DOCTYPE htML><html><head> <met...
收集整理的这篇文章主要介绍了html5新技术socket.io实现聊天室的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。!DOCTYPE htML> html> head> meta charset="UTF-8"> tITle> 1/title> link rel="stylesheet" href="https://cdn.bootcss.COM/bootstrap/3.3.7/css/bootstrap.min.css"> style> .user{ color:lightskyblue; cursor: pointer; } /style> /head> body> div> div> div> div class="panel panel-default"> div> h4> 欢迎来老王聊天室/h4> /div> div> ul id="messageUl"> /ul> /div> div> div> div> input id="txtMsg" type="text" onkeydown="handleKeyDown(event)"> /div> div> button class="BTn btn-default" onclick="send()"> 发送 span class="glyphicon glyphicon-send"> /span> /button> /div> /div> /div> /div> /div> div> div class="panel panel-default"> div> h4> 在线用户/h4> /div> div> ul id="userUl"> /ul> /div> div> h4 id="onlineUsers"> 在线人数 0/h4> /div> /div> /div> /div> /div> script src="/socket.io/socket.io.js"> /script> script> let txtMsg = document.querySelector('#txtMsg'); let onlineUsers = document.querySelector('#onlineUsers'); //此脚本会在window上增加一个io的属性 //http://localhost:8080/=/=空 let socket = io(); //当客户端连接服务器成功之后,向后台发送一个消息,问一下现在有哪些在线用户 socket.on('connect',function(){ socket.emit('users'); } ); let messageUl = document.querySelector('#messageUl'); let userUl = document.querySelector('#userUl'); //监听服务器发过来的消息 socket.on('message',function(msgObj){ let li = document.createElement('li'); li.classname = 'list-group-item'; li.innerHTML = `${ msgObj.username} :${ msgObj.content} span> ${ new Date(msgObj.createAt).toLocaleString()} /span> `; messageUl.appendChild(li); } ); socket.on('userList',function(userList){ userUl.innerHTML = userList.map(item=> ( `li> ${ item} /li> ` )).join(''); countUser(); } ); socket.on('user-added',function(username){ let li = document.createElement('li'); li.className = 'list-group-item'; li.innerHTML = `span> ${ username} /span> `; userUl.appendChild(li); countUser(); } ); function countUser(){ onlineUsers.innerHTML = `在线人数 ${ userUl.children.length} `; } //发送事件 function send(){ let content = txtMsg.value; //先拿到聊天的内容 socket.send(content); txtMsg.value = ''; } function handleKeyDown(event){ if(event.keyCode == 13) send(); } //给父级绑定点击事件 事件委托 //要判断点的是span而非别的元素 userUl.addEventListener('click',function(event){ //如果事件源的类名是user的话 if(event.target.className == 'user'){ let username = event.target.innerHTML; txtMsg.value = `@${ username} `; } } )/script> /body> /html> !--npm i exPress socket.io -S -->
后台node
let exPRess = require('express'); let path = require('path'); let app = express(); app.get('/',function(req,res){ res.sendfile(path.resolve('index.html')); } ); let server = require('http').createServer(app); //socket.io是依赖http服务器let io = require('socket.io')(server); //声明一个对象,保存所有的客户端用户名和它们的socket对应关系let clients = { } ; //监听客户端的连接,当连接到来的时候执行此回调函数io.on('connection',function(socket){ //在函数的内部声明一个变量,叫username let username; //监听客户端的发过来的消息,当消息发过来的时候执行回调函数 socket.on('message',function(data){ if(username){ //判断是公聊还是私聊 let reg = /@([^ ]+) (.+)/; let result = data.match(reg); if(result){ //如果result有值则匹配上了 //此处是私聊 let toUser = result[1]; let content = result[2]; clients[toUser] & & clients[toUser].send({ username, content, createAt:new Date() } ); } else{ //没匹配上 //正常发言,向所有的客户端进行广播 io.emit('message',{ username,content:data,createAt:new Date() } ); } } else{ username = data; //把这个消息当成用户名 //关联起来 clients[username]= socket; //向所有的客户端广播说有新的用户加入聊天室 io.emit('message',{ username:'系统',content:`欢迎 ${ username} 加入聊天室`,createAt:new Date() } ); //事件的名字可以自定义 io.emit('user-added',username); } } ); //监听客户端发过来的请求,把用户数组返回 socket.on('users',function(){ let userList = Object.keys(clients); socket.emit('userList',userList); } ); } ); server.listen(8080); /** * 1.实现匿名聊天 * 1. 在客户端里连接上服务器 * 2. 给发送按钮绑定点击事件,当点击此按钮的时候先获取文本框的内容,把文本框的内容发送到后台 * 3. 后台服务器把此消息广播给所有的客户端。 * 4. 所有的客户端收到消息后把此消息在ul列表里显示出来 * 2.实现具名聊天 * 1. 当此用户第一次向服务器发消息的时候 * 2. 服务器会判断此客户端的用户名是否设置过,如果没设置的话就把这个消息当成用户名,以后再发消息的话都会以这个作为用户名,如果设置过了就是正常发言 * 3. 私聊 * 1. 点击某个在线用户,点击后会在输入框里出现 @xxx yyy * 2. 服务收到私聊的请求后会找到xxx对应的客户端向他单个发消息 * 3 **/
以上就是html5新技术socket.io实现聊天室的方法的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html5新技术socket.io实现聊天室的方法
本文地址: https://pptw.com/jishu/583706.html