Socket.io

Socket.io笔记

• 创建目录 安装所需要的

mkdir coedit
cd coedit
npm init
npm install --save socket.io
npm install --save express

• 接下来创建 index.js 文件，先写入下面这些内容

var  express=require('express');
var  app=express();
var  server=require('http').createServer(app);
var  port=process.env.PORT||3000;
server.listen(port,function(){
   console.log('Server listening at port %d',port);
});
app.get('/',function(req,res){
   res.send(' Hello world');
});

• 接下来，全局安装 nodemon

npm install -g nodemon    
#然后 nodemon index.js 启动我们的应用，这样就可以用浏览器打开 localhost:3000
看到我们搭建好的这个网站了。

var io = require('socket.io')(server);
io.on('connection',function(socket){
    console.log("user connected");
  socket.on('disconnect',function(){
    console.log("user left");
  });
});

• 在添加客户端代码之前，我们有一些准备工作要做。首先需要添加页面模板进来。 index.js添加这两行

app.set('views','./views/pages');
app.set('view engine','jade');
npm install --save jade

• 然后，更改原有的 / 路由代码

app.get('/',function(req,res){
  res.render('index',{
    title: 'coedit'
  });
});

• 添加 views/pages/index.jade 文件，其中内容

doctype
head meta(charset="utf-8") 
  title #{title} 
  script(src="https://code.jquery.com/jquery-1.10.2.min.js")
  script(src="/socket.io/socket.io.js")
body 
  h1 Socket.io is Here
script. 
  var socket = io("localhost:3000");

使用 socket.io 传递数据

• 服务器端代码：

var body = "type in text";
socket.emit('refresh', {body: body});

• 浏览器端，也就是 index.jade 中要添加的响应代码是

socket.on('refresh',function(data){
  $('h1').text(data.body);
});

浏览器中的编辑器 Codemirror

• 需要在 index.jade 中的 head标签下，添加如下的内容

// codemirror begin
link(rel='stylesheet',href='http://codemirror.net/lib/codemirror.css')
link(rel='stylesheet',href='http://codemirror.net/theme/ambiance.css')
script(src='http://codemirror.net/lib/codemirror.js')
script(src='http://codemirror.net/addon/mode/overlay.js')
script(src='http://codemirror.net/mode/markdown/markdown.js')
// codemirror end

• 接下来 body 标签下添加

textarea#textbox
script.
 var editor = CodeMirror.fromTextArea(document.getElementById("textbox"),{
   mode: 'markdown',
   lineNumbers: true, 
   theme: "ambiance" 
});

• 下面我们来捕捉文本修改的事件，来添加这些代码

script. 
  editor.on('change', function(i, op){ 
    socket.emit('change', op); 
});

• 然后，socket.emit('change', op);可以把这些内容发送到服务器上，那么在index.js 中，我们添加如下代码来接收这些数据

socket.on('change', function(op){ 
console.log(op); 
  if (op.origin == '+input' || op.origin == 'paste' || op.origin == '+delete') { 
  socket.broadcast.emit('change', op); 
  };
});

• 这里，服务器把我做的修改拿到，然后 broadcast到了其他所有人，那么大家的浏览器拿到 op的这些修改信息，就需要对页面做相应的更新，这样才能看到我的修改，具体代码就是要在index.jade 中添加

socket.on('change', function(data){ 
 console.log(data); 
 editor.replaceRange(data.text, data.from, data.to);
});