之前閱讀了各種文檔其中有個聊天文檔，按照上述一步一步實現，發現index.js 內引入socket.io.js 然並不起作用，搜索了很多文檔，一一實現也沒解決，改成var ws = websocket('ws://localhost')瀏覽器才會打印出socket,但是卻報另一種錯誤。
后才查閱發現socket.io 和websocket 完全就是兩個東西，具體可參考文檔：https://socket.io/docs/#What-Socket-IO-is-not%EF%BC%89%EF%BC%9A
最后在頭部引入
<script src="/socket.io/socket.io.js"></script>
然后重新關閉（重點）命令行，打開項目文件夾重新啟動命令行npmmoon server.js 解決了。
正確的代碼應該以下：（不然容易牽手不成功）
首先 下載npm install express npm install socket.io 如果想要熱更新再加：npm -g express nodemoon(后面執行命令改為nodemoon 啟動服務即可)
然后再serve.js 內添加下代碼：
var express = require('express'), app = express() server = require('http').createServer(app) io = require('socket.io').listen(server) app.use('/',express.static(__dirname+'/www')) //監聽80端口 server.listen(8078); console.log('server started'); //socket部分 io.on('connection', function(socket) { //接收並處理客戶端發送的foo事件 socket.on('foo', function(data) { //將消息輸出到控制台 console.log(data); }) });
在同目錄下創建www文件=》內添加index.html(客戶端)
index.html <html> <title> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content="Wayou"> <meta name="description" content="hichat | a simple chat application built with node.js and websocket"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>hichat</title> <!-- <script src="/socket.io/socket.io.js"></script> --> <!-- <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script> --> <!-- <script src="http://localhost:8078/socket.io/socket.io.js"></script> --> </title> <body> <div> test <button id="sendBtn">點擊發送1</button> </div> <script src="/socket.io/socket.io.js"></script> <script type="text/javascript"> var socket = io(); button=document.getElementById('sendBtn'); button.onclick=function(){ console.log('io',io) socket.emit('foo', 'hello');//發送一個名為foo的事件，並且傳遞一個字符串數據‘hello’ } /**REMOVE ME IF YOU CANT ACCESS GOOGLE SERVICE**/ // (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ // (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), // m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) // })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); // ga('create', 'UA-46794744-7', 'hichat.herokuapp.com'); // ga('send', 'pageview'); /**REMOVE END**/ </script> </body> </html>
啟動服務器：nodemoon serve.js
打開瀏覽器點擊按鈕 控制台就會獲取客戶端發送的數據了，剩下的擴展就根據api進行開發即可
socket.io 事件速查表：
io.on('connect', onConnect); function onConnect(socket){ // 發送給當前客戶端 socket.emit('hello', 'can you hear me?', 1, 2, 'abc'); // 發送給所有客戶端，除了發送者 socket.broadcast.emit('broadcast', 'hello friends!'); // 發送給同在 'game' 房間的所有客戶端，除了發送者 socket.to('game').emit('nice game', "let's play a game"); // 發送給同在 'game1' 或 'game2' 房間的所有客戶端，除了發送者 socket.to('game1').to('game2').emit('nice game', "let's play a game (too)"); // 發送給同在 'game' 房間的所有客戶端，包括發送者 io.in('game').emit('big-announcement', 'the game will start soon'); // 發送給同在 'myNamespace' 命名空間下的所有客戶端，包括發送者 io.of('myNamespace').emit('bigger-announcement', 'the tournament will start soon'); // 發送給指定 socketid 的客戶端（私密消息） socket.to(<socketid>).emit('hey', 'I just met you'); // 包含回執的消息 socket.emit('question', 'do you think so?', function (answer) {}); // 不壓縮，直接發送 socket.compress(false).emit('uncompressed', "that's rough"); // 如果客戶端還不能接收消息，那么消息可能丟失 socket.volatile.emit('maybe', 'do you really need it?'); // 發送給當前 node 實例下的所有客戶端（在使用多個 node 實例的情況下） io.local.emit('hi', 'my lovely babies'); };
服務端 io.on(‘connection’,function(socket));//監聽客戶端連接,回調函數會傳遞本次連接的socket io.sockets.emit(‘String’,data);//給所有客戶端廣播消息 io.sockets.socket(socketid).emit(‘String’, data);//給指定的客戶端發送消息 socket.on(‘String’,function(data));//監聽客戶端發送的信息 socket.emit(‘String’, data);//給該socket的客戶端發送消息 廣播消息 //給除了自己以外的客戶端廣播消息 socket.broadcast.emit("msg",{data:"hello,everyone"}); //給所有客戶端廣播消息 io.sockets.emit("msg",{data:"hello,all"}); 分組 socket.on('group1', function (data) { socket.join('group1'); }); socket.on('group2',function(data){ socket.join('group2'); }); 客戶端發送 socket.emit(‘group1’)，就可以加入group1分組； socket.emit(‘group2’)，就可以加入group2分組； 一個客戶端可以存在多個分組（訂閱模式） 踢出分組 socket.leave(data.room); 對分組中的用戶發送信息 //不包括自己 socket.broadcast.to('group1').emit('event_name', data); //包括自己 io.sockets.in('group1').emit('event_name', data); broadcast方法允許當前socket client不在該分組內 獲取連接的客戶端socket io.sockets.clients().forEach(function (socket) { //..... }) 獲取分組信息 //獲取所有房間（分組）信息 io.sockets.manager.rooms //來獲取此socketid進入的房間信息 io.sockets.manager.roomClients[socket.id] //獲取particular room中的客戶端，返回所有在此房間的socket實例 io.sockets.clients('particular room') 另一種分組方式 io.of('/some').on('connection', function (socket) { socket.on('test', function (data) { socket.broadcast.emit('event_name',{}); }); }); 客戶端 var socket = io.connect('ws://103.31.201.154:5555/some') socket.on('even_name',function(data){ console.log(data); }) 客戶端都鏈接到ws://103.31.201.154:5555 但是服務端可以通過io.of(‘/some’)將其過濾出來。 另外，Socket.IO提供了4個配置的API：io.configure, io.set, io.enable, io.disable。其中io.set對單項進行設置，io.enable和io.disable用於單項設置布爾型的配置。io.configure可以讓你對不同的生產環境（如devlopment，test等等）配置不同的參數。 客戶端 建立一個socket連接 var socket = io(“ws://103.31.201.154:5555”); 監聽服務消息 socket.on('msg',function(data){ socket.emit('msg', {rp:"fine,thank you"}); //向服務器發送消息 console.log(data); }); socket.on(“String”,function(data)) 監聽服務端發送的消息 Sting參數與服務端emit第一個參數相同 監聽socket斷開與重連。 socket.on('disconnect', function() { console.log("與服務其斷開"); }); socket.on('reconnect', function() { console.log("重新連接到服務器"); }); 客戶端socket.on()監聽的事件： connect：連接成功 connecting：正在連接 disconnect：斷開連接 connect_failed：連接失敗 error：錯誤發生，並且無法被其他事件類型所處理 message：同服務器端message事件 anything：同服務器端anything事件 reconnect_failed：重連失敗 reconnect：成功重連 reconnecting：正在重連 當第一次連接時，事件觸發順序為：connecting->connect；當失去連接時，事件觸發順序為：disconnect->reconnecting（可能進行多次）->connecting->reconnect->connect。