# vue socket 簡易實作 19

###### tags: `vue`

我們這次來嘗試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標籤，加上值，在渲染到畫面上。
非常簡陋的聊天介面就完成了。