我們這次來嘗試vue和socket的結合,做一個簡單的聊天介面。
先在專案資料夾新增一個js檔,用來做socket伺服端。
在view裡新增一個元件,記得設定路由,用來當作客戶端。
接著要安裝套件,開啟cmd打
npm install vue-socket.io --save
npm install --save express
npm install --save socket.io
安裝完成後到main.js引用
connection:裡面的網址是你啟動socket的位置。
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://localhost:3000',
vuex: {}
}))
切到客戶端
新增輸入框、一個按鈕和一個div。
輸入框v-model一個data,這樣做不用再用js語法抓值,直接this.data。
按鈕觸發function。
div用來顯示送出的訊息和接收其他人傳的資訊。
<input type="text" v-model="text">
<br>
<button @click="send">send</button>
<br>
<div id="show">
伺服端
以下程式碼是socket的基本架構,主要會在" io.on('conne... "裡做和客戶端的互動。
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket) {
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
切到客戶端,我們要在button觸發的function送出訊息。
send(){
this.$socket.emit('send',{
msg: this.text,
});
this.text = "";
},
socket送出語法為,
this.$socket.emit(事件名稱,送出的值)
送出值之後要把輸入值清空。
切換到伺服端輸入
socket.on('send', function(obj) {
console.log(obj.msg);
});
我們可以在裡面console.log(),就可以看到客戶端傳過來的值。
socket監聽語法為
socket.on(要監聽的事件名稱, function(監聽到的事件帶的值){
});
當我們能接收到客戶端傳來的訊息,就需要把該訊息再傳來其他客戶端,我們在伺服器端再加上
io.on('connection', function(socket) {
socket.on('send', function(obj) {
console.log(obj.msg);
socket.broadcast.emit('other', {
msg: obj.msg,
});
socket.emit('self', {
msg: obj.msg,
});
});
});
多了兩段emit的程式。
socket.broadcast.emit 是指傳到除了自己之外的客戶端。
socket.emit 是指傳到自己所在的客戶端。
客戶端也要能接由伺服端傳來資料的程式,我們在script裡打
sockets:{
connect(){
console.log("connect")
},
other(data){
console.log("other",data)
var dark = document.createElement("p")
dark.innerHTML= data.msg+"\r\n"
var inin = document.getElementById("show");
inin.append(dark)
},
self(data){
console.log("self",data)
var dark = document.createElement("p")
dark.innerHTML = data.msg+"\r\n"
var inin = document.getElementById("show");
inin.append(dark)
}
}
connect()能看是否連線成功。
客戶端監聽語法為
事件名稱(接到的值){
//do something
},
抓到伺服端的值後,就做js語法新增p標籤,加上值,在渲染到畫面上。
非常簡陋的聊天介面就完成了。