Home > Developer > Web Develop
Recently in the study "HTML5 game development Combat", of which the 8th chapter is the use of WebSocket to build multiplayer games---"You draw my guess." However, in the implementation process, it has been wrong:
When the client requests, the server side will error and terminate:
The browser side also makes an error:
Server code:
var ws = Require (__dirname + ' \\lib\\ws\\server '); var server = ws.createserver (); Server.addlistener ("Connection",function(conn) { // Handling Connection Access Console.log ("A connection established with ID", conn.id); var message = "Welcome" + conn.id + "joining the party. Total Connection: "+ server.manager.length; Console.log (message); Server.broadcast (message);}); Server.listen (8000); Console.log ("WebSocket server is running.") ); Console.log ("Listening to Port 8000.");Client code:
varWebsocketgame = {}$(function(){ if(window[' WebSocket ']){ //Create a connectionWebsocketgame.socket =NewWebSocket ("ws://localhost:8000"); //Handling Open EventsWebsocketGame.socket.onopen =function(e) {Console.log (' WebSocket connection established. '); }; //Handling Message EventsWebsocketGame.socket.onmessage =function(e) {console.log (e.data); }; //handling the Close eventWebsocketGame.socket.onclose =function(e) {Console.log (' WebSocket connection closed. '); }; }});
Various bug fixes are not valid. And then find out that the reason is chrome side incompatibility:
Node-websocket-server, does not support the WebSocket draft-10, and Chrome 14+ browser, only support draft-10 websocket, so chrome basically can not be used
Because the book-based tutorial uses Node-websocket-server lib. So here's a tutorial that's changed to Websocket-node.
This tool needs to follow two environments mvc++ and Python2.7 so choose to use Socket.io
Create a new two files App.js and index.html
App.js
varFS = require (' FS '), HTTP= Require (' http '), Socketio= Require (' Socket.io '); varServer = Http.createserver (function(req, res) {Res.writehead ($, {' Content-type ': ' text/html '}); Res.end (Fs.readfilesync (__dirname+ '/index.html '));}). Listen (8000,function() {Console.log (' Listening at:http://localhost:8000 ');}); Socketio.listen (server). On (' Connection ',function(socket) {Socket.on (' Message ',function(msg) {Console.log (' Message Received: ', MSG); Socket.broadcast.emit (' Message ', MSG); });});
Index.html:
<HTML><Head> <Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></Script> <Scriptsrc= "/socket.io/socket.io.js"></Script> <Script> $(function(){ varIosocket=Io.connect (); Iosocket.on ('Connect', function () { $('#incomingChatMessages'). Append ($ ('<li>Connected</li>')); Iosocket.on ('message', function(Message) {$ ('#incomingChatMessages'). Append ($ ('<li></li>'). Text (message)); }); Iosocket.on ('Disconnect', function() { $('#incomingChatMessages'). Append ('<li>Disconnected</li>'); }); }); $('#outgoingChatMessage'). KeyPress (function(event) {if(Event.which== -) {event.preventdefault (); Iosocket.send ($ ('#outgoingChatMessage'). Val ()); $('#incomingChatMessages'). Append ($ ('<li></li>'). Text ($ ('#outgoingChatMessage'). Val ())); $('#outgoingChatMessage'). Val ("'); } }); }); </Script></Head><Body>Incoming Chat: <ulID= "Incomingchatmessages"></ul><BR/><inputtype= "text"ID= "Outgoingchatmessage"></Body></HTML>
Then under current directory cmd: cnpm install Socket.io, a folder Node_modules is generated under the directory.
Then use the command: node app.js to start the server
When you open two browser windows, you can chat with one another:
Reference:
Nodejs 4 ways to implement WebSocket
Getting Started with Socket.io and node. js
node. JS Implementation WebSocket
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
