socket.io实现简单多人聊天室
生活随笔
收集整理的這篇文章主要介紹了
socket.io实现简单多人聊天室
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡單多人聊天室
- 設計理念
- 效果圖
- 1 初始化項目
- 2下載需要使用的包到依賴上
- 3搭建服務器
- 4服務器搭建成功
- 5配置公共文件夾
- 多人聊天室代碼
- html
- css
- js
設計理念
相當于一個微信群聊，登錄進入群聊，實現多人聊天。
效果圖
1 初始化項目
前提是已經安裝并且能夠熟練使用nodejs
打開終端或者cmd 進入你的項目根目錄
初始化項目，直到生成以下文件，才算成功。
2下載需要使用的包到依賴上
npm i express nodemon socket.io --save根目錄有node_modules ，以及package.json下有以下內容。
3搭建服務器
服務器的名稱必須和package.json中的mian下邊的文件名一樣。
4服務器搭建成功
5配置公共文件夾
重啟服務器，瀏覽器打開localhost:3000，默認打開public下邊的index.html文件。
點擊socket.io.js下載解壓找到dist/socket.io.js文件，寫入public文件中，導入index.html
多人聊天室代碼
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>聊天室</title><script src="js/socket.io.min.js"></script><link rel="stylesheet" href="css/index.css" /><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="js/chat.js"></script> </head><body><div class="login-wrap"><div class="login-con"><h3>用戶登錄</h3><input type="text" placeholder="請輸入昵稱" id="loginName" /><button class="login-btn">登錄</button></div></div><div class="chat-wrap hide"><h1>多人聊天室</h1><div class="chat-con clearfix"></div><div class="bottom"><input type="text" id="sendtxt" /><button class="sendBtn">發送</button></div></div></body></html>css
/*公共樣式*/* {padding: 0;margin: 0; }.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden }.clearfix {*zoom: 1 }.cred {color: #f03e3e; }.cgreen {color: #459d36; }.hide {display: none; }.fr {float: right; }.fl {float: left; }.rela {position: relative; }.abs {position: absolute; }h1 {margin: 0 auto;z-index: 20;width: 100%;height: 50px;line-height: 50px;font-size: 20px;background: #000;color: #fff;text-align: center; }.login-wrap, .chat-wrap {background-color: #f1d4d4;width: 600px;height: 800px;margin: 0 auto;text-align: center;position: relative; }.chat-con {height: 697px;overflow-y: scroll; }.login-con {padding-top: 50px; }.login-con h3 {margin-bottom: 20px; }.login-con input, .login-con button {width: 400px;display: block;margin: 0 auto;height: 40px;line-height: 40px;margin-top: 40px; }.login-con button {background: #FFA07A;border: none;cursor: pointer;outline: 1px solid #ececee; }.bottom {position: absolute;width: 600px;height: 50px;bottom: 0px;left: 0;line-height: 50px; }.bottom input {width: 540px;height: 50px;float: left;outline: none;border: 1px solid black; }.bottom .sendBtn {width: 50px;height: 50px;line-height: 50px;float: left;outline: none; }.chat-item {width: 100%;margin-bottom: 20px; }.item-right .message {background: #62b900; }.item-left .message {background: #fff;margin-top: 20px; }.item-left .img {margin-right: 10px; }.item-left .uname {font-size: 12px;left: 50px;top: 0; }.chat-item .message {width: 60%;display: block;padding: 10px;border-radius: 5px;margin-right: 10px; }.chat-item .img {display: inline-block;width: 40px;height: 40px;background: url(../img/1.jpg) no-repeat;background-size: 100% 100%; }.item-right .img {background: url(../img/2.jpg) no-repeat;background-size: 100% 100%; }.item-right .uname {font-size: 12px;right: 50px;top: 0; }js
$(function() {var socket = io();var uname = null;$('.login-btn').click(function() {uname = $('#loginName').val();// 2通過login用戶名傳遞給服務器------------------if (uname) {socket.emit('login', {username: uname});} else {alert('清輸入昵稱')}// 6失敗提示昵稱重復---------------------socket.on('loginFail', (data) => {alert('昵稱重復');})// 7登錄成功后顯示加入群聊----------------------------// 8點擊發送把value的值傳入服務器---------------------})socket.on('leave', (data) => {if (data != null) {let p = `<p>${data}已退出群聊</p>`;$('.chat-con').append(p);}})// 6登錄成功跳轉到聊天室{username: "xsxs cdscd"}--------------------socket.on('loginSuccess', (data) => {if (data.username == uname) {checkiIn(data);socket.on('add', (data) => {console.log(data);let p = `<p>${data.username}已加入群聊</p>`;$('.chat-con').append(p);})} else {alert('用戶名不匹配')}})$('.sendBtn').click(function() {sendMsg();})// 10接受服務器的所有寫入信息，寫入頁面-----------------------socket.on('receiveMessage', (data) => {showMessage(data)console.log(data);});$(document).keydown(function() {if (event.keyCode == 13) {sendMsg();}})function sendMsg() {var text = $('#sendtxt').val();$('#sendtxt').val('');if (text) {socket.emit('sendMseeage', {username: uname,message: text})}}function showMessage(data) {// { username: 'xs ', message: '從v的師傅薈萃' }console.log(data);var p = null;if (data.username == uname) {p = ` <div class="chat-item item-right clearfix"><span class="img fr"></span> <span class="message fr">${data.message }</span></div>`} else {p = `<div class="chat-item item-left clearfix rela"><span class="abs uname"> ${data.username}</span><span class="img fl"></span><span class="fl message"> ${data.message }</span></div>`}$('.chat-con').append(p);} })function checkiIn(data) {$('.login-wrap').hide();$('.chat-wrap ').show(); }總結
以上是生活随笔為你收集整理的socket.io实现简单多人聊天室的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vc调用matlab生成的dll实例
- 下一篇： 二元查找树的后序遍历结果