扛着锄头写代码之vuejs和nodejs搞起web app系列
上次为了vue.js实现web app看的nodejs，首先感谢上次各位大神对nodejs初识不足的指点。本次烟纠了个小小的Demo，来总结和提疑。
Demo主要使用nodejs搭的websocket服务，vuejs实现的客户端功能，凑上HTML5 （听说H5这个必须这样写完整才专业，而且5前面不要空格）的canvas实现的“简易你画我猜 ”Web APP。
演示如下：
入口界面
客户端（左画端，右猜端，画布同步显示图像）
（题外话：原本想部署到线上免费服务heroku给大家画画，可惜一个tool下载不来，oschina的免费服务也已经挂掉了，形同虚设，无奈。晚点看看使用测试服务主机部上去后更新在这里。访问地址：http://xxxx你M啊免费的服务都是搞假的.com:8081）
欲实现多个房间的“你画我猜”互相不受干扰的功能时，遇到诸多疑惑。
一步一步来，
1.首先安装nodejs(不赘述)，安装需要的服务（本次直接使用了代码包：https://github.com/lh16/jianyiwohuanicai.git）。
2.APP项目目录：
(1) ws-server.js服务代码，使用websocket，这里主要是ws的使用，仅贴主要代码（详见码包），
//向客户端（猜词）响应
ws.on('message', function(message) {
//console.log(ws.clients.query)
console.log('received: %s', message)
if(0){
console.log('no port')//非当前端口
}
else{
console.log(message)
console.log(keyWord)
if (message == keyWord) {//猜词画布数据
console.log('correct')
wss.clients.forEach((client) => {//客户端响应
client.send('ok')
})
} else {
console.log('wrong')
wss.clients.forEach((client) => {
client.send(message)
})
}
}
})
疑问：ws响应针对所有的客户端请求，如何指定ID只向指定ID的客户端响应？
(2) nodejs 搭建的服务器代码server.js.
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(8081, 'localhost', function (err) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:8081');
});
(3) APP代码，这里才是VUE知识。
index.js入口，App.vue母板，darwing-board.vue画布组件，showing--board.vue猜词组件。
一段关于VUE组件主要代码：
import Vue from 'vue'
import DrawingBoard from './components/drawing-board.vue'
import showingBoard from './components/showing-board.vue'
export default {
data() {
return {
player: 0,
data_id: 0
}
},
components: {
DrawingBoard,
showingBoard
},
methods: {
draw(event) {
this.data_id = event.currentTarget.id,
document.getElementById('dv').setAttribute('data_value',this.data_id),
this.player = (this.data_id == 1 ? 1:this.data_id+'.1')
},
guess(event) {
this.data_id = event.currentTarget.id,
document.getElementById('dv').setAttribute('data_value',this.data_id),
this.player = (this.data_id == 1 ? 2:this.data_id+'.2')
},
replay(event) {
this.data_id = event.currentTarget.id,
document.getElementById('dv').setAttribute('data_value',this.data_id),
this.player = 0
location.reload()
}
}
}
... ...
通过click事件监听和player值的变化显示不同的界面组件（画布或者猜词），这对于开发Web APP再友好不过了。页面通过实时获取坐标值并通过ws实时请求并同步响应到猜词客户端达到图像的同步。(想像下聊天室功能可能会更直观)
疑问：当前这种模式下的组件包含实现如何让父组件（App.vue）传递组件的id或者传值到子组件(showing-board.vue)？尝试了用DIV属性的方式实现不同层级之间的传值可以实现但是ws是不支持URL传参的，导致请求与服务之间无法识别id标识。
3.运行
项目部署编写完毕，cmd客户端cd进入项目目录 执行命令
node ws-server.js// 开启ws服务器
npm run dev// 运行客户端
然后浏览器可访问：http://127.0.0.1:8081/
后记：初步对vuejs和nodejs有所认识，对于目前文中提到的学习过程中相关疑问还未得到清晰的答案，有待研究，期待大神。
参考资源：
vuejs手册： http://cn.vuejs.org/guide/index.html
源demo： https://github.com/jrainlau/draw-something
感谢作者分享资源。
