websocket聊天室

来源:互联网 发布:经典球员数据盖德穆勒 编辑:程序博客网 时间:2024/05/16 00:41

安装node

1 到官网下载最新node https://nodejs.org/en/
2 傻瓜试按装 “下一步”
3 安装npm 或者 cnpm

下载安装nodejs-websocket

nodejs-websocket是第三方js模块
打开cmd,然后将路径指向项目路径,然后输入 cnpm install nodejs-websocket
这里写图片描述

如果npm install nodejs-websocket无法下载并报如下错误,
解决办法:在目录c:\users\long\AppData\Roming下新建一个名为npm文件(注意:没有后缀名!!!,不同的电脑路径不一致,懂大致意思就行)

其实 本人建议采用cnpm的方式安装 模块
npm install nodejs-websocket 命令其实也是可以的,就是网速很慢(毕竟是访问国外的)
如果 不行建议采用 cnpm install nodejs-websocket 或者安装到全局也可以 cnpm install nodejs-websocket -g

目录结构

1 如果cnpm install nodejs-websocket -g
目录中就 wsServer.js 和 wsClient.js
2 如果cnpm install nodejs-websocket
目录中就有 node-modules文件夹(依赖的模块)、 wsServer.js 和 wsClient.js

服务器端代码wsServer.js

var ws = require("nodejs-websocket");  var fs = require("fs");  var server = ws.createServer(function (conn) {      console.log("connection sussess");      conn.on("text", function (str) {          server.connections.forEach(function (connection) {              connection.sendText(str);          });      });  });  server.listen(8080);console.log("WS 启动");

客户端代码wsClient.js

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>chat room</title></head><body onload="getWs()">    <input size="50" id="msg" placeholder="请输入聊天内容">       <input type="submit" value="发送" id="show" onclick="sendWs()">       <script>      var ws = null;      function getWs() {              //ws = new WebSocket("ws://"+window.location.hostname+":8080");/ip访问              ws = new WebSocket("ws://127.0.0.1:8080");//本地访问              ws.onopen = function () {                  console.log("ws open");              }              ws.onmessage = function (event) {                  var div = document.createElement("div");                  div.textContent = event.data;                  document.body.appendChild(div);              }              ws.onclose = function () {                  console.log("ws close");              }              ws.onerror = function () {                  console.error("ws error");              }         }      function sendWs(){          var msg = document.getElementById("msg");          if(msg.value == ''){              alert('聊天内容不能为空');          } else {              var date = new Date();              var time = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();              ws.send("["+time+"] "+msg.value);              msg.value = '';          }      }      </script></body></html>

结果
这里写图片描述

注意事项

1 安装nodejs-websocket 时多种选择npm方式比较慢。个人偏向cnpm 或者 Yarn(后面介绍)
2 如果wsServer.js 放外网,注意改wsClient.js的ip和端口号

websocket原理

websocket 是采用ws协议 不是http协议,但是第一次连接采用了http后面都采用的是ws协议
却别与ajax轮询 和 long poll

http://blog.csdn.net/longlc123/article/details/76100354

(后期做个好点聊天 放github)

原创粉丝点击