iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Modern Web

初學者前端應用30天系列 第 19

[DAY19]vue socket 簡易實作

  • 分享至 

  • xImage
  •  

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


上一篇
[DAY18] vue hooper 套件
下一篇
[DAY20]檔案閱讀器
系列文
初學者前端應用30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
iven
iT邦新手 5 級 ‧ 2021-12-07 10:47:44

請問這個能提供範例程式碼嗎?

我要留言

立即登入留言