使用node+vue實現簡單的WebSocket聊天功能

websocket的即時通訊很是的強大，這裏我用node啓動了一個服務進行websocket連接，而後再vue的view裏面進行了連接，進行通訊，廢話很少說，直接上代碼吧，

首先，我須要用到node的nodejs-websocket模塊

使用yarn進行安裝

1	yarn add nodejs-websocket --save

固然，你也能夠用npm進行安裝

1	npm i nodejs-websocket --save

安裝完畢以後，咱們開始寫服務端的代碼，首先，我用node在本地起了一個node服務器用來開啓websocket服務

sock.js:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

let ws = require( "nodejs-websocket" ); console.log( "開始創建連接" ); ws.createServer(function (conn) {    conn.on( "text" , function (str) {      console.log( "收到的信息爲" , str);        conn.send(`${str}（機器人`)    });    conn.on( "close" , function (code, reason) {      console.log( "關閉鏈接" )    });    conn.on( "error" , function (code, reason) {      console.log( "異常關閉" )    }) }).listen( 8001 ); console.log( "連接創建完畢" );

服務端主要是用nodejs-websocket用來開啓服務，以及返回前端須要的值，這裏我只是作了一個簡單的處理，在接受值得後面加了一個‘機器人’的string,

而後，咱們須要開啓這個node服務，

命令後面的路徑必定要找對，我是把sock.js放在了根目錄的socket文件夾下面

執行

1	yarn socket

　　

最後，看咱們的客戶端，客戶端我是想有一個輸入框，而後有個聊天框：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

<template>    <div  class = "test3" >      <div  class = "msg"  ref= "box" >        <div v- for = "item in list"  : class = "[item.type,'msg-item']" >          <p>            {{item.content}}          </p>        </div>      </div>      <div  class = "input-group" >        <input type= "text"  v-model= "contentText" >        <button  @click = "sendText" >發送</button>      </div>    </div> </template>   <script>    export  default  {      name:  "index3" ,      data() {        return  {          list: [], //聊天記錄的數組          contentText:  "" , //input輸入的值        }      },      methods: {        //發送聊天信息         sendText() {          let that =  this ;          this .list = [... this .list, {type:  "mine" , content:  this .contentText}]; //經過type字段進行區分是本身（mine）發的仍是系統（robot）返回的          this .backText(function () {            that.contentText =  "" ; //加回調在獲得返回數據的時候清除輸入框的內容          });        },        backText(callback) {          let that =  this ;          if  (window.WebSocket) {            let ws =  new  WebSocket( "ws://192.168.11.169:8001" );            ws.onopen = function (e) {              console.log( "連接服務器成功" );              console.log( "that.contentText is" , that.contentText);              ws.send(that.contentText);              callback();            };            ws.onclose = function (e) {              console.log( "服務器關閉" )            };            ws.onerror = function () {              console.log( "服務器出錯" )            };            ws.onmessage = function (e) {              that.list = [...that.list, {type:  "robot" , content: e.data}]            }          }        }      },      watch: {        //監聽list,當有修改的時候進行div的屏幕滾動，確保能看到最新的聊天        list: function () {          let that =  this ;          setTimeout(() => {            that.$refs.box.scrollTop = that.$refs.box.scrollHeight;          },  0 );          //加setTimeout的緣由：因爲vue採用虛擬dom，我每次生成新的消息時獲取到的div的scrollHeight的值是生成新消息以前的值，因此形成每次都是最新的那條消息被隱藏掉了        }      },      mounted() {      }    };     </script>   <style scoped lang= "scss" >    .test3 {      text-align: center;    }      .msg {      width: 100px;      height: 100px;      overflow: auto;      padding-top: 5px;      border: 1px solid red;      display: inline-block;      margin-bottom: 6px;        .msg-item {        position: relative;        overflow: hidden;        p {          display: inline-block;          border-radius: 40px;          background: #3C3D5A;          color: white;          float : left;          padding: 2px 12px;          margin:  0  0  2px  0 ;          max-width:  70 %;          text-align: left;          box-sizing: border-box;        }          &.mine {          p {            float : right;            background: aquamarine;            color: white;          }        }      }    }   </style>

　　看一下最終效果：

 

 

 

 

 

 

.