之前一直在讲理论，这次说点干货。顺便从零开始写单行Vue系列。优神终究是优神，一时半会模拟整个vue真的很难。让我们进入正题。（这里需要一个node环境，如果电脑上没有安装node...查看如何安装，如果不知道怎么安装依赖包，也查看一下，如果不知道怎么安装运行js文件，也检查一下。）这里我只是使用一个工具包，叫做nodejs-websocket1.首先创建一个websocket服务，占用3000端口：constws=require('nodejs-websocket');constwsServer=ws.createServer(function(res){console.log('有新连接');setTimeout(function(){res.sendText('hello')},1000);})wsServer.listen(3000,function(err){if(!err)console.log('创建成功');});然后启动服务，启动服务前记得npminstallnodejs-websocket--save，否则会报缺少依赖包的错误。这时候可以在浏览器的console控制台输入varconnect1=newWebSocket('ws://localhost:3000');varconnect2=newWebSocket('ws://localhost:3000');看到node的控制台打印三行，创建成功，有一个新的连接，这里有一个新的连接，说明ws服务已经创建成功了。2、然后是前后端的交互。刚才后台有个setTimeout(function(){res.sendText('hello')},1000)；这是一个从后台传给前端的内容，但是因为前端没有写accept方法，所以可以重写一个connect3测试一个前后端交互的测试。varconnect3=newWebSocket('ws://localhost:3000');connect3.onmessage=function(res){console.log(res);}如果写的没问题，一秒后，浏览器控制台出来一条信息。刚才说了后台给前端发消息，接下来说说前端给后台发消息；前端向后台发送消息的方法叫做send；nodejs-websocket的accept方法调用了on('text')，这里重写了后台，给后台添加点函数。constws=require('nodejs-websocket');constwsServer=ws.createServer(function(res){console.log('有新连接');res.on('text',function(text){console.log(text);res.sendText('我收到了你的消息'+text)})})wsServer.listen(3000,function(err){if(!err)console.log('创建成功');});然后重启ws服务器...重新运行js前端浏览器控制台改写回车即可（刚刚在后台重启，相当于重新调整了界面）varconnect=newWebSocket('ws://localhost:3000');connect.onmessage=function(res){console.log(res);}连接成功后，在浏览器控制台输入一句connect.send('1234556')，看到后台这里返回了一条消息...至此基本的长连接功能就完成了。然后给每个连接一个自己的名字。在前端，每??个连接都有一个名字，比如connect、connect1、connect2。但是背景并没有明显的区别。所以前端连接websocket的时候，把信息带进来，后台加一个url包，解析url。这里房间不多，就一个chatRoom房间，参数固定为name。（懒得写判断了）重写后台constws=require('nodejs-websocket');consturl=require('url');constwsRooms={chatRoom:{}};//用于接受房间constwsServer=ws.createServer(function(conn){varurlInfo=url.parse(conn.path,true);wsRooms.chatRoom[urlInfo.query.name]=conn;//命名这个resconsole.log('Thereisanewconnection');console.log(wsRooms);})wsServer.listen(3000,function(err){if(!err)console.log('创建成功');});这时前端浏览器输入varconnect=newWebSocket('ws://localhost:3000/chatRoom?name=hello');connect.onmessage=function(res){console.log(res);后台的wsRooms已将此对话连接添加到下面的聊天室。并命名为hello，然后就是最后一步了。刚才在聊天中有个实验，前端发送，后台会返回一个“我收到你的消息”。现在它将成为前端发送。发送消息上面已经为每个会话命名，所以发送一个用户，然后发送一个文本，后端解析后发送给用户。我直接上代码了。constws=require('nodejs-websocket');consturl=require('url');constwsRooms={chatRoom:{}};//用于接受房间constwsServer=ws.createServer(function(res){varurlInfo=url.parse(res.path,true);wsRooms.chatRoom[urlInfo.query.name]=res;//命名这个resconsole.log('Thereisanewconnection');console.log(wsRooms);res.on('text',function(res){vardata=JSON.parse(res);varsender=data.name;vartext=data.text;varmessage={name:urlInfo.query.name,text:text};wsRooms.chatRoom[sender].sendText(JSON.stringify(message));})})wsServer.listen(3000,function(err){if(!err)console.log('创建成功');});然后是浏览器控制台varhello=newWebSocket('ws://localhost:3000/chatRoom?name=hello');hello.onmessage=function(res){console.log(res);}varlolo=newWebSocket('ws://localhost:3000/chatRoom?name=lolo');lolo.onmessage=function(res){console.log(res);}连接成功后，输入hello.send(JSON.stringify({name:'lolo',text:'hellololo'}));为了更好的测试效果，可以开两个控制台，一个控制台发消息，另一个控制台跳出消息，相当于聊天推送
