based on Websocet simple chat room (Nodejs + node-websocket-server)3 People collection This article, collection of this article published 24 days ago, there have been
135Times read a total
2A comment
3People to collect this article
Recently in the study of HTML5 related things, see WebSocket is a very powerful technology, so a small try, made a simple chat room.
WebSocket principle is not much introduced, if you want to realize the WebSocket server, the specific agreement look here: Bash (do not know you reader can look down, anyway, I did not see.) ）
First, the operating environment
1, Service end: The previous stage to see Oschina on the introduction of Nodejs, feeling is a very good stuff, both before and after the table with JS should be a very good feeling it, haha: P. Since the use of websocket, of course, to see how to let Nodejs support WebSocket. After the search found Node-websocket-server is a websocket implementation of Nodejs, installed Node-websocket-server we can start. But I install node-websocket-server when but a little bit of trouble, for other children's shoes less detours I here is simple to say:
Linux installation is relatively simple, first install NPM, command (Curl http://npmjs.org/install.sh | SH): After installing NPM, enter your project development directory and then perform NPM install Websocket-server to install Node-websocket-server.
Because NPM cannot be installed under Windows (unless you are using Cygwin ...). It wouldn't be too much trouble. And don't know the directory structure of the Nodejs module, so there is no way to install it again in the arch with NPM. After installation found that its directory structure is as follows: In the project directory to build a node_modules directory, open Node_modules can see a websocket-server directory .... Is it possible to follow such a directory structure under Windows? So decisively to the Windows test, download Websocket-server plug-in (address), after decompression according to the above directory after the start of the Nodejs, sure enough; The use of Node-websocket-server is also very simple, see more: Bash
The following is the beginning of the code ...
Second, the service-side implementation
Simple description: Create an array to hold all links to the server, and send this message to other clients when a message from the client is received. View Source print?
| 01 |
var Conns = new Array (); |
| 03 |
var ws = Require (' Websocket-server '); |
| 05 |
var server = Ws.createserver (); |
| 07 |
Server.addlistener (' Connection ', function (conn) { |
| 08 |
Console.log (' connection ... '); |
| 12 |
Conn.addlistener (' message ', function (msg) { |
| 16 |
for (var i=0; i<conns.length; i++) { |
| 25 |
Console.log (' running ... '); |
Third, the client implementation
When received the message will be sounded the classic sentence: You have a new message, please pay attention to check
View Source print?
| 03 |
<script type= "Text/javascript" > |
| 04 |
var host = ' 127.0.0.1 '; |
| 06 |
var url = ' ws://' +host+ ': ' +port+ '/'; |
| 08 |
var w = new WebSocket (URL); |
| 10 |
var audioelement = document.createelement (' audio '); |
| 11 |
Audioelement.setattribute (' src ', ' Qqmsg.mp3 '); |
| 13 |
W.onopen = function () { |
| 14 |
$ (' Chat-box '). InnerHTML = ' connected to server ......<br/> '; |
| 17 |
W.onmessage = function (e) { |
| 19 |
var chatbox = $ (' Chat-box '); |
| 21st |
Audioelement.play (); |
| 22 |
chatbox.innerhtml = chatbox.innerhtml+msg+ ' <br/> '; |
| 26 |
var talk = $ (' Talk '); |
| 27 |
var Nike = $ (' Nike '); |
| 29 |
W.send (' <strong style= ' color:red ' > ' +nike.value+ ':</strong> ' +talk.value); |
| 32 |
return document.getElementById (ID); |
| 38 |
<div id= "Chat-box" style= "bordddder:1px solid #cccccc; width:400px; height:400px; Overflow:scroll; " ></div> |
| 39 |
Nickname: <input type= "text" id= "Nike"/><br/> |
| 40 |
Content: <input type= "text" id= "talk"/><input type= "button" id= "Send" onclick= "Send ();" value= "Send"/> |
Four, the Operation effect
V. Summary
The example above is tested and developed under Chrome and not tested by other browsers.
With WebSocket we can easily implement features that were difficult to implement before. And Nodejs also let a person in front of a bright, before and after the table with JS feeling quite cool ah. Really like Nodejs, also recommended that everyone try it, very easy to use.
