websocket学习-持续更新

来源：互联网发布：dblp数据集编辑：程序博客网时间：2024/06/06 11:43

服务端nodejs

客户端js

首先，服务端代码

创建一个server.js

var clients = [];var uuid=require('node-uuid');var WebSocketServer = require('ws').Server,    wss = new WebSocketServer({port:8181});wss.on('connection',function(ws){var client_uuid=uuid.v4();var nickname=client_uuid.substr(0,8);clients.push({"id":client_uuid,"ws":ws,"nickname":nickname});console.log('client [%s] connected',client_uuid);ws.on('message',function(message){for(var i=0;i<clients.length;i++){var clientSocket=clients[i].ws;console.log('client [%s]:%s',clients[i].id,message);clientSocket.send(JSON.stringify({"id":client_uuid,"message":message}));}});ws.on('close',function(){for(var i=0;i<clients.length;i++){if(clients[i].id==client_uuid){console.log('client [%s] disconnected',client_uuid);clients.splice(i,1);}}})})

我上面在最基础的功能上增加了用户ID。

客户端代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>websocket</title><link rel="stylesheet" href="css/demo.css" type="text/css" /><meta charset="utf-8"></head><body><div id="header"></div><div id="main">    <div id="body" class="light">    <div id="content" class="show">                      <div class="demo">            <form id="uploadForm"  enctype="multipart/form-data">                    <div class="upload_box">                        <div class="upload_choose">                            <input id="message" type="text" size="30" name="fileselect[]" multiple />                        </div>                        <div class="upload_submit">                            <button type="button" id="fileSubmit" class="upload_submit_btn" onclick="sendMessage()">发送</button>                        </div>                        <div class="upload_choose">                            <div id="messagebox" ></div>                        </div>                    </div>                </form>            </div>        </div>           </div></div><script src="http://libs.baidu.com/jquery/1.4.4/jquery.js"></script><script>var ws =new WebSocket("ws:localhost:8181");ws.onopen = function(e){console.log('connection to server opened');}ws.onmessage = function(e){var data=JSON.parse(e.data);var message=document.createElement("li");message.innerHTML= data.message;document.getElementById('messagebox').appendChild(message);}ws.onerror=function(e){console.log("websocket failure,error",e);//handleErrors(e);}ws.onclose=function(e){console.log(e.reason+""+e.code);}//ws.close(1000,'websocket closed');function sendMessage(){ws.send($('#message').val());}</script></body></html>

用cmd启动服务器server.js

客户端聊天画面

现在只是暂时实现了聊天功能，等我慢慢把视频。表情都做出来了，下阶段再见！

阅读全文

1 0