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 id="欢迎来老王聊天室">欢迎来老王聊天室</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 id="在线用户">在线用户</h4>
</div>
<div>
<ul id="userUl"></ul>
</div>
<div>
<h4 id="在线人数-nbsp">在线人数 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 -->バックグラウンドノード
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を使用したチャットルームを実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AMH5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。
H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AMHTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。
HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AMHTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。
H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AMH5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。
H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AMH5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。
H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AMHTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。
HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AMHTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。
HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AMHTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
ホットトピック
7830
15164814140252130025123929