基於網絡聊天室的社交遊戲 -- vue、socket.io-client
阿新 • • 發佈:2017-07-02
社交遊戲 網絡聊天 tar style nodes -c eba html target
系列博文的傳送門:http://www.cnblogs.com/lastpairs/p/6993237.html
客戶端代碼github地址 https://github.com/xxyjskx1987/lastpairswebapp
服務器端代碼github地址 https://github.com/xxyjskx1987/lastpairsnodeserver
項目演示地址 http://www.tanmiba.com/
socket.io在BS架構的即時通信工具中,可以說是不二選擇,本例在vue中使用socket.io,將其封裝為常量模塊,通過import引用。
安裝socket.io
npm install socket.io -s
模塊封裝
import io from ‘socket.io-client‘ const CHAT = { socket: null, msgArr: [],
logout: function(){
this.socket.disconnect();
}, init: function(){ this.socket = io.connect(‘ws://127.0.0.1:3000‘); this.socket.on(‘login‘, function(obj){ CHAT.msgArr.push(obj) });//監聽用戶退出 this.socket.on(‘logout‘, function(o){ }); } } export default CHAT
在VUE文件中調用示例
<script> import CHAT from ‘client‘ export default { name: ‘‘, data () { return { } }, mounted(){ CHAT.init() }, methods: { logout: function() { CHAT.logout() } } } </script>
業務功能可以在socket-client中添加方法,調用方式同如上所示。
基於網絡聊天室的社交遊戲 -- vue、socket.io-client