使用socket.io實(shí)現(xiàn)簡(jiǎn)單聊天室案例
更新時(shí)間：2018年01月02日 13:56:18 作者：宇智波幽助
這篇文章主要介紹了使用socket.io實(shí)現(xiàn)簡(jiǎn)單聊天室案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了socket.io實(shí)現(xiàn)簡(jiǎn)單聊天室的具體代碼，供大家參考，具體內(nèi)容如下
1、客戶端【index.html】代碼：
<body>
<h3>socket簡(jiǎn)例</h3>
<hr>
<div id = 'app'>
<div>
<div>
<ul>
<li v-for = 'item in msgs'>
{{item.name}}說：{{item.content}}
</li>
</ul>
</div>
<div>
<p><input type="text" v-model = 'msg'><button @click = 'm_send()'>發(fā)送</button></p>
</div>
</div>
</div>
<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() {
// 向客戶端發(fā)送消息
socket_client.emit('say_client', {
name : this.name,
content : this.msg
}) ;
this.msg = '' ;
}
}
}).$mount('#app') ;
// socket服務(wù)器
var socket_client = io.connect('http://127.0.0.1:3000') ;
/**
* 監(jiān)聽服務(wù)端發(fā)來的消息
*
* 1、“say_server”是客戶端發(fā)出信息時(shí)的key值
* 2、“res”是客戶端傳來的value值
*/
socket_client.on('say_server' ,function(res){
console.log('服務(wù)端發(fā)來的消息為：', res) ;
_vm.msgs.push(res);
});
</script>
</body>
2、服務(wù)端【app.js】代碼：
const http = require('http') ;
const server = http.createServer() ;
// web服務(wù)器
const express = require('express') ;
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8888, function () {
console.log('web服務(wù)器成功啟動(dòng)了，IP：127.0.0.1，端口號(hào)：8888') ;
});
// socket服務(wù)器
const socketio = require('socket.io') ;
const socket_server = socketio(server) ;
// 建立和客戶端的socket連接
socket_server.on('connection', function(client) {
// console.log(client) ; // 查看連接進(jìn)來的客戶端對(duì)象內(nèi)容
// console.log(Object.keys(client)) ; // 查看連接進(jìn)來的客戶端對(duì)象的關(guān)鍵key值
/**
* 監(jiān)聽客戶端發(fā)來的消息
*
* 1、“say_client”是客戶端發(fā)出信息時(shí)的key值
* 2、“res”是客戶端傳來的value值
*/
client.on('say_client', function(res) {
console.log('客戶端發(fā)來的消息為：', res) ;
// 向客戶端發(fā)送消息
socket_server.emit('say_server', res) ;
}) ;
}) ;
server.listen(3000, function() {
console.log('socket服務(wù)器成功啟動(dòng)了，IP：127.0.0.1，端口號(hào)：3000') ;
}) ;
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Node的單線程設(shè)計(jì)已經(jīng)沒法更充分的"壓榨"機(jī)器性能了，Node新增了一個(gè)內(nèi)置模塊cluster，它可以通過一個(gè)父進(jìn)程管理一坨子進(jìn)程的方式來實(shí)現(xiàn)集群的功能，這篇文章主要介紹了深入剖析Node.js cluster模塊，感興趣的小伙伴們可以參考一下2018-05-05
Node.js 中的 Buffer緩沖區(qū)實(shí)例詳解
Buffer 是 Node.js 提供的用于處理二進(jìn)制數(shù)據(jù)的類,在瀏覽器中我們可以使用 Blob 或 ArrayBuffer,但 Node 環(huán)境下使用 Buffer 更加高效和靈活,本文給大家介紹Node.js 中的 Buffer緩沖區(qū),感興趣的朋友一起看看吧2025-04-04
開發(fā)者對(duì)Base64編碼肯定很熟悉，是否對(duì)它有很清晰的認(rèn)識(shí)就不一定了。實(shí)際上Base64已經(jīng)簡(jiǎn)單到不能再簡(jiǎn)單了，這篇文章給大家通過示例代碼介紹了node.js對(duì)字符串和圖片base64編碼解碼的方法，有需要的朋友們可以通過本文來進(jìn)行學(xué)習(xí)，下面來一起看看吧。2016-10-10
Windows下Node.js安裝及環(huán)境配置方法
這篇文章主要為大家介紹一下Node.js安裝及環(huán)境配置方法，這也是腳本之家小編發(fā)現(xiàn)的比較詳細(xì)的教程了，從安裝到配置都很詳細(xì)，想學(xué)習(xí)Node.js的朋友可以參考一下2017-09-09
一文講解如何把已安裝的nodejs高版本降級(jí)為低版本
部分老舊項(xiàng)目需要使用低版本的node,網(wǎng)上很多是無效的,高版本無法直接安裝低版本node,但是低版本nodejs可以安裝部分高版本node,從而達(dá)到升級(jí)效果,下面這篇文章主要給大家介紹了關(guān)于如何把已安裝的nodejs高版本降級(jí)為低版本的相關(guān)資料,需要的朋友可以參考下2024-06-06
WebSocket Node構(gòu)建HTTP隧道實(shí)現(xiàn)實(shí)例
這篇文章主要為大家介紹了WebSocket Node構(gòu)建HTTP隧道實(shí)現(xiàn)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Node.js之構(gòu)建WebSocket服務(wù)全過程
這篇文章主要介紹了Node.js之構(gòu)建WebSocket服務(wù)全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
node?NPM庫qs?iconv-lite字符串編碼轉(zhuǎn)換及解析URL查詢學(xué)習(xí)
這篇文章主要為大家介紹了node?NPM庫之qs解析URL查詢字符串及iconv-lite字符串編碼轉(zhuǎn)換學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Node.js環(huán)境下JavaScript實(shí)現(xiàn)單鏈表與雙鏈表結(jié)構(gòu)
Node環(huán)境下通過npm可以獲取list的幾個(gè)相關(guān)庫,但是我們這里注重于自己動(dòng)手實(shí)現(xiàn),接下來就一起來看一下Node.js環(huán)境下JavaScript實(shí)現(xiàn)單鏈表與雙鏈表結(jié)構(gòu)2016-06-06
這篇文章主要詳細(xì)介紹了Node事件循環(huán)，文中的圖片以及文字講解可以幫助大家更好的了解事件循環(huán)，感興趣的小伙伴可以看一看，多多參考一下2021-08-08