使用socket.io如何实现聊天室
这篇文章主要介绍了使用socket.io实现简单聊天室案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了socket.io实现简单聊天室的具体代码，供大家参考，具体内容如下
1、客户端【index.html】代码：
<body>
<h3>socket简例</h3>
<hr>
<p id = 'app'>
<p>
<p>
<ul>
<li v-for = 'item in msgs'>
{{item.name}}说：{{item.content}}
</li>
</ul>
</p>
<p>
<p><input type="text" v-model = 'msg'><button @click = 'm_send()'>发送</button></p>
</p>
</p>
</p>
<script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.9/vue.min.js'></script>
<script type="text/javascript" src = 'https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js'></script>
<script type="text/javascript">
var _vm = new Vue({
data : {
name : '用户',
msg : '',
msgs : [],
},
methods : {
m_send : function() {
// 向客户端发送消息
socket_client.emit('say_client', {
name : this.name,
content : this.msg
}) ;
this.msg = '' ;
}
}
}).$mount('#app') ;
// socket服务器
var socket_client = io.connect('http://127.0.0.1:3000') ;
/**
* 监听服务端发来的消息
*
* 1、“say_server”是客户端发出信息时的key值
* 2、“res”是客户端传来的value值
*/
socket_client.on('say_server' ,function(res){
console.log('服务端发来的消息为：', res) ;
_vm.msgs.push(res);
});
</script>
</body>2、服务端【app.js】代码：
const http = require('http') ;
const server = http.createServer() ;
// web服务器
const express = require('express') ;
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8888, function () {
console.log('web服务器成功启动了，IP：127.0.0.1，端口号：8888') ;
});
// socket服务器
const socketio = require('socket.io') ;
const socket_server = socketio(server) ;
// 建立和客户端的socket连接
socket_server.on('connection', function(client) {
// console.log(client) ; // 查看连接进来的客户端对象内容
// console.log(Object.keys(client)) ; // 查看连接进来的客户端对象的关键key值
/**
* 监听客户端发来的消息
*
* 1、“say_client”是客户端发出信息时的key值
* 2、“res”是客户端传来的value值
*/
client.on('say_client', function(res) {
console.log('客户端发来的消息为：', res) ;
// 向客户端发送消息
socket_server.emit('say_server', res) ;
}) ;
}) ;
server.listen(3000, function() {
console.log('socket服务器成功启动了，IP：127.0.0.1，端口号：3000') ;
}) ;上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 使用socket.io如何实现聊天室. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
37
110
Bagaimana untuk melaksanakan fungsi bilik sembang mudah menggunakan MySQL dan Java
Sep 21, 2023 pm 05:13 PM
Cara menggunakan MySQL dan Java untuk melaksanakan fungsi bilik sembang ringkas Pengenalan: Dengan kelaziman media sosial hari ini, orang ramai semakin bergantung pada sembang dalam talian untuk berkomunikasi dan berkongsi maklumat. Bagaimana untuk melaksanakan fungsi bilik sembang mudah menggunakan MySQL dan Java adalah projek yang sangat menarik dan praktikal. Artikel ini akan memperkenalkan cara menggunakan MySQL dan Java untuk melaksanakan fungsi ini, dan menyediakan contoh kod khusus. 1. Bina pangkalan data Pertama, kita perlu mencipta pangkalan data dalam MySQL untuk menyimpan maklumat berkaitan bilik sembang.
Bagaimana untuk membangunkan ruang sembang Websocket menggunakan bahasa Go
Dec 14, 2023 pm 01:46 PM
Cara menggunakan bahasa Go untuk membangunkan ruang sembang Websocket Websocket ialah protokol komunikasi masa nyata yang membolehkan komunikasi dua hala antara pelayan dan pelanggan dengan mewujudkan sambungan. Websocket ialah pilihan yang sangat baik apabila membangunkan bilik sembang kerana ia membolehkan pertukaran mesej masa nyata dan memberikan prestasi yang cekap. Artikel ini akan memperkenalkan cara membangunkan ruang sembang Websocket yang mudah menggunakan bahasa Go dan menyediakan beberapa contoh kod khusus. 1. Penyediaan 1. Pasang Go
Bina ruang sembang masa nyata berdasarkan JavaScript
Aug 10, 2023 pm 11:18 PM
Membina bilik sembang masa nyata berdasarkan JavaScript Dengan perkembangan pesat Internet, orang ramai memberi lebih banyak perhatian kepada pemesejan segera dan pengalaman interaktif masa nyata. Sebagai alat pemesejan segera yang biasa, bilik sembang masa nyata adalah sangat penting kepada individu dan perniagaan. Artikel ini akan memperkenalkan cara membina ruang sembang masa nyata yang ringkas menggunakan JavaScript dan memberikan contoh kod yang sepadan. Mula-mula kami memerlukan halaman hadapan sebagai antara muka UI ruang sembang. Berikut ialah contoh struktur HTML mudah: <!DOCTYPE
Panduan Pembangunan Bilik Sembang ThinkPHP6: Melaksanakan Fungsi Komunikasi Masa Nyata
Aug 12, 2023 pm 02:31 PM
Panduan Pembangunan Bilik Sembang ThinkPHP6: Melaksanakan Fungsi Komunikasi Masa Nyata Pengenalan: Dengan perkembangan pesat Internet, permintaan untuk komunikasi masa nyata juga semakin meningkat. Sebagai kaedah biasa komunikasi masa nyata, bilik sembang telah mendapat perhatian dan penggunaan yang meluas. Artikel ini akan memberikan anda kaedah yang mudah dan pantas untuk melaksanakan fungsi komunikasi masa nyata dengan menggunakan rangka kerja ThinkPHP6. 1. Konfigurasi persekitaran: Sebelum memulakan, kita perlu mengkonfigurasi persekitaran pembangunan. Pastikan anda telah memasang rangka kerja PHP dan ThinkPHP6. Pada masa yang sama, artikel ini akan membuat
Membangunkan fungsi bilik sembang menggunakan php dan Websocket
Dec 02, 2023 am 11:08 AM
Menggunakan PHP dan Websocket untuk membangunkan fungsi bilik sembang Pengenalan: Dengan perkembangan pesat Internet, bilik sembang telah menjadi salah satu cara penting untuk orang ramai berkomunikasi dan bersosial dalam kehidupan seharian. Menggunakan teknologi PHP dan Websocket untuk membangunkan fungsi bilik sembang boleh mencapai komunikasi dua hala masa nyata dan memberikan pengguna pengalaman sembang yang lebih lancar dan mudah. Artikel ini akan memperkenalkan cara menggunakan PHP dan Websocket untuk melaksanakan ruang sembang ringkas dan memberikan contoh kod khusus. 1. Persediaan: Sebelum memulakan pembangunan, kita perlu memastikan
Bagaimana untuk menyelesaikan masalah perkhidmatan proksi nginx socket.io
May 13, 2023 pm 12:43 PM
nginx proksi dua pelayan socket.io. Mod kerja socket.io adalah mengundi dan menaik taraf kepada websocket Apabila meminta perkhidmatan melalui nginx, sejumlah besar ralat muncul. Tetapi apabila mengakses terus melalui ip+port, ia adalah 100% berjaya. Menganalisis sidsid adalah kunci kepada masalah kami. Apabila mula-mula membuat sambungan (mod pengundian mensimulasikan sambungan yang panjang), pelanggan akan memulakan permintaan sedemikian: https://***/?eio=3&transport=polling&t=154082071
Swole in action: cepat buat ruang sembang berdasarkan WebSocket
Jun 14, 2023 pm 04:20 PM
Dalam era Internet, bilik sembang telah menjadi tempat penting untuk orang ramai berkomunikasi dan bersosial. Kemunculan teknologi WebSocket telah menjadikan komunikasi masa nyata lebih lancar dan stabil. Hari ini, kami memperkenalkan cara menggunakan rangka kerja Swoole untuk membina ruang sembang dengan cepat berdasarkan WebSocket. Swoole ialah rangka kerja komunikasi rangkaian coroutine PHP berprestasi tinggi, ditulis dalam bahasa C, menyepadukan IO tak segerak, coroutine, komunikasi rangkaian dan fungsi lain, menjadikan kod PHP seperti Node.js
Penyepaduan PHP dan WebSocket merealisasikan pembangunan ruang sembang masa nyata
Jun 25, 2023 pm 01:13 PM
Dalam dunia pembangunan web, ciri sembang langsung telah menjadi semakin popular. Ia membantu pengguna berinteraksi dengan mudah dalam masa nyata dan meningkatkan komunikasi dan pemahaman. Untuk melaksanakan sembang masa nyata, kita perlu menggunakan protokol WebSocket dan memerlukan bahasa pengaturcaraan yang boleh mengendalikan permintaan WebSocket. Dalam artikel ini, kami akan memperkenalkan cara melaksanakan pembangunan bilik sembang masa nyata menggunakan penyepaduan PHP dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh yang membolehkan komunikasi masa nyata antara penyemak imbas dan pelayan.
