基于WebSocet简单聊天室（NodeJS + node-websocket-server）

最新推荐文章于 2024-05-03 15:55:47 发布

lznsnail

最新推荐文章于 2024-05-03 15:55:47 发布

阅读量4.8k

点赞数 2

文章标签：聊天 websocket function windows 服务器 chrome

基于WebSocet简单聊天室（NodeJS + node-websocket-server）

3人收藏此文章，收藏此文章发表于24天前 , 已有 135次阅读共 2个评论 3人收藏此文章

最近在学习HTML5相关的东西，看到WebSocket是个很强大的技术，于是乎就小试了一下，做了个简单的聊天室。

WebSocket的原理就不多介绍了，如果想自己实现WebSocket服务器的话具体协议看这里：猛击（不知道各位看官能不能看下去，反正我是没有看！）

一、运行环境

1、服务端：前个阶段看到OSChina上介绍NodeJS，感觉是个很不错的东东，前后台都用js应该是个很不错的感觉吧，哈哈:P。既然要用到WebSocket，当然要看看如何让NodeJS支持WebSocket了。经过搜索发现 node-websocket-server 是NodeJS的一个WebSocket实现，安装好 node-websocket-server 我们就可以开工了。不过我安装 node-websocket-server的时候可是费了点周折，为其他童鞋少走弯路我这里就简单说一下吧：

Linux下安装比较简单，首先安装NPM，命令（curl http://npmjs.org/install.sh | sh）；安装完NPM后进入你的项目开发目录然后执行npm install websocket-server即可安装node-websocket-server。

Windows下由于无法安装NPM（除非使用cygwin......这样岂不太麻烦？），而且不知道nodejs模块的目录结构，所以没有办法自己又在Arch用NPM方式安装了一遍。安装后发现其目录结构如下：在项目目录下生成一个node_modules目录，打开node_modules可以看到有个websocket-server目录.......是不是按照这样的目录结构在Windows下也可以呢？于是乎果断到Windows中试验，下载websocket-server插件（地址），解压后按照上面的目录放置后启动nodejs，果然可以 ;-)。node-websocket-server的使用也非常简单，详细参见：猛击

下面就开始贴代码了......

二、服务端实现

功能简单描述：创建一个数组用来保存所有连接到服务器的链接，当收到一个来自客户端的消息后就把这条消息发送给其他客户端。

 
    01var  conns = new  Array(); 
 
    02  
 
    03var  ws = require('websocket-server'); 
 
    04  
 
    05var  server = ws.createServer(); 
 
    06  
 
    07server.addListener('connection', function(conn){ 
 
    08    console.log('connection....'); 
 
    09      
 
    10    conns.push(conn); 
 
    11      
 
    12    conn.addListener('message',function(msg){ 
 
    13      
 
    14        console.log(msg); 
 
    15          
 
    16        for(var i=0; i<conns.length; i++){ 
 
    17            if(conns[i]!=conn){ 
 
    18                conns[i].send(msg); 
 
    19            } 
 
    20        } 
 
    21    }); 
 
    22}); 
 
    23  
 
    24server.listen(8080); 
 
    25console.log('running......');

三、客户端实现

在收到消息的时候会响起经典的那句：您有新短消息，请注意查收

 
    01<html> 
 
    02<head> 
 
    03<script type="text/javascript"> 
 
    04var host = '127.0.0.1'; 
 
    05var port = 8080; 
 
    06var url = 'ws://'+host+':'+port+'/';  
 
    07  
 
    08var w = new WebSocket(url); 
 
    09  
 
    10var audioElement = document.createElement('audio'); 
 
    11audioElement.setAttribute('src', 'qqmsg.mp3'); 
 
    12  
 
    13w.onopen = function(){ 
 
    14    $('chat-box').innerHTML = '已连接到服务器......<br/>'; 
 
    15} 
 
    16  
 
    17w.onmessage = function(e){ 
 
    18    var msg = e.data; 
 
    19    var chatBox = $('chat-box'); 
 
    20      
 
    21    audioElement.play();     
 
    22    chatBox.innerHTML = chatBox.innerHTML+msg+'<br/>'; 
 
    23} 
 
    24  
 
    25function send(){ 
 
    26    var talk = $('talk'); 
 
    27    var nike = $('nike'); 
 
    28      
 
    29    w.send('<strong style="color:red">'+nike.value+':</strong>'+talk.value); 
 
    30} 
 
    31function $(id){ 
 
    32    return document.getElementById(id); 
 
    33} 
 
    34</script> 
 
    35</head> 
 
    36  
 
    37<body> 
 
    38<div id="chat-box" style="bordddder:1px solid #cccccc; width:400px; height:400px; overflow:scroll;"></div> 
 
    39昵称:<input type="text" id="nike"/><br/> 
 
    40内容:<input type="text" id="talk"/><input type="button" id="send" onClick="send();" value="发送"/> 
 
    41</body> 
 
    42</html>

四、运行效果

websocket view

五、总结

上面的例子在chrome下测试开发，其他浏览器未进行测试~~。

有了websocket我们可以轻松的实现以前很难实现的功能。而nodejs也让人眼前一亮，前后台都用js的感觉相当的爽啊.真是非常喜欢nodejs，也推荐大家都试用一下，非常容易上手。

lznsnail

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
基于WebSocet简单聊天室（NodeJS + node-websocket-server）

基于WebSocet简单聊天室（NodeJS + node-websocket-server）3人收藏此文章，收藏此文章发表于24天前 , 已有135次阅读共2个评论3人收藏此文章最近在学习HTML5相关的东西，看到WebSocket是个很强大的技术
复制链接

扫一扫